js jquery分别实现动态的文件上传操作按钮的添加和删除
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery文件上传</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
var addMore = function() {
var div = document.getElementById("div2");
var br = document.createElement("br");
var input = document.createElement("input");
var button = document.createElement("input");
input.setAttribute("type", "file");
button.setAttribute("type", "button");
button.setAttribute("value", "Remove");
button.onclick = function() {
div.removeChild(br);
div.removeChild(input);
div.removeChild(button);
}
div.appendChild(br);
div.appendChild(input);
div.appendChild(button);
}
//节点的移动
//$(function(){
//});
</script>
</head>
<body>
<div id="div1">
<input type="file" id="upload"/>
<input type="button" id="btn" value="more" onclick="addMore();"/>
</div>
<div id="div2"></div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery文件上传</title>
<title>jquery1</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
/** var addMore = function() {
var div = document.getElementById("div2");
var br = document.createElement("br");
var input = document.createElement("input");
var button = document.createElement("input");
input.setAttribute("type", "file");
button.setAttribute("type", "button");
button.setAttribute("value", "Remove");
button.onclick = function() {
div.removeChild(br);
div.removeChild(input);
div.removeChild(button);
}
div.appendChild(br);
div.appendChild(input);
div.appendChild(button);
}**/
//jquery实现文件上传的按钮添加和删除
$(function(){
$("input[type=button]").click(function(){
var br = $("<br>");
var input = $("<input type='file'/>");
var button = $("<input type='button' value='Remove'/>");
$("#div1").append(br).append(input).append(button);
button.click(function() {
br.remove();
input.remove();
button.remove();
});
});
});
</script>
</head>
<body>
<div id="div1">
<input type="file" id="upload"/>
<input type="button" id="btn" value="more" onclick="addMore();"/>
</div>
<div id="div2"></div>
</body>
</html>
相关推荐
-
jQuery页面弹出框实现文件上传
如图所示,点击新增,弹出如图的弹出框,点击取消不保存页面信息,点击确定保存页面信息 在前台页面添加一个标签,任何都可以 <div class="btn btn-default" id="divadd">新增</div> 写弹出框页面 <div id="popup_overlay" style="display: none; position: fixed; top: 0px; left: 0px; righ
-
jQuery文件上传插件Uploadify使用指南
对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Flash,主要特性:支持多文件上传.HTML5版本可拖拽上传.实时上传进度条显示.强大的参数定制功能,如文件大小.文件类型.按钮图片定义.上传文件脚本等. Flash版本使用方法:1.加载JS和CSS 复制代码 代码如下: <script src="jquery/1.7.1/jquery.min.js" type="text/javascript"></script&
-
jQuery实现文件上传进度条特效
上传进度条通常是由前面jquery加后端了脚本器脚本来实现了,今天我们介绍的是一款基本php+jQuery实现文件上传进度条效果的例子,具体细节如下. 最近呢,一个项目做一个进度条的效果出来,这个之前还真没做过.刚好这周没什么东西了,就拿这个来充一下数吧. 文件上传,得先准备一个"按钮": 这个看上去还是不错的吧,实现也是很简单的: <span class="upload-span">开始上传文件</span> <button>太
-
Jquery Uploadify多文件上传带进度条且传递自己的参数
复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpLoad.aspx.cs" Inherits="UploadifyDemo_UpLoad" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" r
-
php+jQuery.uploadify实现文件上传教程
这两天用上传的控件,PHP+Jquery今天先介绍这个uploadify,嗯,我今天下载因为我英文不是很好所以我就在网上找的使用教程,我发现好多用不了,我那个去,你看官方文档才知道很多API已经不是以前的API了.今天总结一下给大家,给大家一个提醒最多还是要看官方的http://www.uploadify.com/documentation/! 简单举例一下使用然后我都加上注释给大家,方便大家阅读和使用下载官方的之后直接使用就OK了,当然你需要什么在直接修改就可以了! 复制代码 代码如下: <!
-
分享20多个很棒的jQuery 文件上传插件或教程
1. Plupload Plupload 是一个Web浏览器上的界面友好的文件上传模块,可显示上传进度.图像自动缩略和上传分块.可同时上传多个文件. 2. The KillersAjax Upload 该插件使用 XHR 用于上传多个文件,支持上传进度显示,但不支持 IE 3. SWFUpload jQuery Plugin 4. AjaxFileUpload 5. Uploadify Uploadify简单说来,是基于Jquery的一款文件上传插件.它的功能特色总结如下: 支持单文件或多文件上
-
jquery插件ajaxupload实现文件上传操作
本文实例讲述了jquery插件ajaxupload实现文件上传操作代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 图1 文件上传前 图2 文件上传后 具体代码如下: 1.创建页面并编写HTML 上传文档: <div class="uploadFile"> <span id="doc"><input type="text" disabled="disabled" /></sp
-
Jquery结合HTML5实现文件上传
1.利用Jquery使用HTML5的FormData属性实现对文件的上传 在HTML5以前我们如果需要实现文件上传服务器等功能的时候,有时候我们不得不依赖于FLASH去实现,而在HTML5到来之后,我们很容易的实现对文件的上传,只需要利用HTML5的一个FormData属性,结合Jquery就很容易实现文件的上传,而且读取文件的上传进度,下面这个上传案例就是基于上面所说的实现的,下面我将所所有的JS和CSS以及HTML页面代码放在下面. 注意事项:FormData属性必须依赖于HTML5,所以如
-
jQuery Ajax文件上传(php)
如何实现jQuery的Ajax文件上传,PHP如实文件上传.AJAX上传文件,PHP上传文件. [PHP文件上传] 在开始之前,我觉得是有必要把通WEB上传文件的原理简单说一下的.实际上,在这里不管是PHP,JSP,还是ASP处理上传的文件,其实都是WEB早已把文件上传到服务器了,我们只是运用上传处理函数来处理上传的文件.而处理函数一般都是用PHP,JSP,ASP等服务端语言来实现的.那么如何通过WEB(HTTP协议来上传文件呢?)你需要类似于以下的HTML代码:test.html 复制代码 代
-
使用jQuery Uploader显示文件上传进度
请到 Download 下载资源 的 JQueryElement 示例下载一节下载示例代码 (我们下载)本文将说明 Uploader 控件的功能以及使用过程中的注意事项和技巧, 目录如下: * 准备 * 创建保存页面 * 添加 FileUpload 控件 * 设置 EnableSessionState * 调用 Uploader 的 Save 方法 * 创建获取进度的页面 * 创建上传页面 * 设置保存页面 * 设置获取进度的页面 * 上传 * 隐藏保存页面 准备 请确保已经在 Download