JQuery Ajaxfileupload.js、 input异步上传图片 和多图片上传
来源:互联网 发布:淘宝商城女装秋装套装 编辑:程序博客网 时间:2024/06/05 11:44
今天来总结一下 ajaxfileupload.js 这是个非常好的异步上传图片的插件,来解决form表单上传时要刷新页面的问题。
一、操作前工作
1.首先引入:jquery 这不用多说。
2.引入Ajaxfileupload.js(单文件上传),链接地
址:http://download.csdn.net/detail/webxiaoma/9851195
3.引入Ajaxfileupload.js(多文件上传,下面会讲到),链接地
址:http://download.csdn.net/detail/webxiaoma/9851239
二、input 文件上传的一些知识点
1.input上传文件一般只能选择单个文件,但是加入multiple="multiple"
属性就ok了。例如: <input type="file" id="file" multiple="multiple">
2.input在上传时会有一个上传的files对象,里面存储了一些上传文件的信息 获取files对象信息:
<input type="file" id="file" multiple="multiple"><script> document.getElementById("file").change=function(){ console.log(this.files) }</script>
files 对象的一些信息如下:
有一个filesList对象, this.files[0]
你会看到一些file的基本信息:(信息我不在解释,直接上图很清楚)
三、Ajaxfileupload.js 的一些属性
url 上传处理程序地址。
fileElementId 需要上传的文件域的ID,即的ID。
secureuri 是否启用安全提交,默认为false。
dataType 服务器返回的数据 类型。可以为xml,script,json,html。如果不填写,jQuery会自动判断。
success 提交成功后自动执行的处理函数,参数data就是服务器返回的数据。
error 提交失败自动执行的处理函数。
data 自定义参数,当有数据是与上传的图片相关的时候,这个东西就要用到了。
type 当要提交自定义参数时,这个参数要设置成post
书写方式我们直接上代码:
<input type="file" id="file" multiple="multiple"><scrip $.ajaxFileUpload({ "url": "*/*.php", //上传处理程序地址。 "fileElementId":"file", //需要上传的文件域的ID,即<input type="file">的ID。 "secureuri":false, // 是否启用安全提交,默认为false。 "dataType":"json", //服务器返回的数据 类型。可以为xml,script,json,html。如果不填写,jQuery会自动判断。 "success":function(data, status){}, //提交成功后自动执行的处理函数,参数data就是服务器返回的数据。 "error":function(data, status, e){}, // 提交失败自动执行的处理函数。 "data":{"json":"aa"}, // 自定义参数。这个东西比较有用,当有数据是与上传的图片相关的时候,这个东西就要用到了。 "type":"post" //当要提交自定义参数时,这个参数要设置成post }) </script>
四、Ajaxfileupload.js 的多图片上传
1.你可以直接下载我已经更改好的多文件上传 Ajaxfileupload.js 文件。
链接地址:http://download.csdn.net/detail/webxiaoma/9851239
2.或是自己直接手动修改单文件上传的 Ajaxfileupload.js
//修改前代码------- var oldElement = jQuery('#' + fileElementId); var newElement = jQuery(oldElement).clone(); jQuery(oldElement).attr('id', fileId); jQuery(oldElement).before(newElement); jQuery(oldElement).appendTo(form); //修改前代码------- //修改后代码------- for(var i in fileElementId){ var oldElement = jQuery('#' + fileElementId[i]); var newElement = jQuery(oldElement).clone(); jQuery(oldElement).attr('id', fileId); jQuery(oldElement).before(newElement); jQuery(oldElement).appendTo(form); } //修改后代码-------
修改文件后,js提交文件时有小动的修改:
$.ajaxFileUpload({ "url": "*/*.php", //上传处理程序地址。 //fileElementId:'file1',//原使用方法 "fileElementId":["file1","file2"], //需要上传的文件域的ID,即<input type="file">的ID。每次上传图片都要上传ID "secureuri":false, // 是否启用安全提交,默认为false。 "dataType":"json", //服务器返回的数据 类型。可以为xml,script,json,html。如果不填写,jQuery会自动判断。 "success":function(data, status){}, //提交成功后自动执行的处理函数,参数data就是服务器返回的数据。 "error":function(data, status, e){}, // 提交失败自动执行的处理函数。 "data":{"json":"aa"}, // 自定义参数。这个东西比较有用,当有数据是与上传的图片相关的时候,这个东西就要用到了。 "type":"post" //当要提交自定义参数时,这个参数要设置成post})
这里做一下说明,多文件上传时,属相fileElementId 要上传一个数组,数组里包含要上传文件的input ID;
我们可以在input每次 chenge 时,将它的ID 存储在 一个数组中,然后在将数组传递给后台。
- JQuery Ajaxfileupload.js、 input异步上传图片 和多图片上传
- ajaxfileupload.js异步上传图片
- ajaxFileupload异步上传图片
- ajaxfileupload.js 实现异步上传图片
- Js上传图片 jquery:ajaxfileupload和angular:angular-file-upload
- thinkphp+ajaxfileupload 异步上传图片
- jQuery、ajaxFileUpload上传图片记录
- ajaxfileupload.js、struts2、ajax、json异步上传图片
- AjaxFileUpload组件结合Struts2异步图片上传
- JFinal+ajaxfileupload实现图片的异步上传
- spring mvc+ajaxfileupload 实现异步上传图片
- jquery异步上传图片
- jquery异步上传图片
- js异步上传图片
- Ajaxfileupload上传多张图片
- freemarker+springMVC+ajaxfileupload实现异步图片上传(多张)
- 使用ajax上传图片(ajaxfileupload.js)
- ajaxFileUpload上传图片
- 滴滴 webapp 5.0 Vue 2.0 重构经验分享
- MySQL触发器使用详解
- JS基础算法题解析
- Smartbi开发之--默认打开主题下的某分析
- How many ways??
- JQuery Ajaxfileupload.js、 input异步上传图片 和多图片上传
- nginx.conf,ssl安全性A+
- 分页的几种方法
- spring,mybatis事务管理配置与@Transactional注解使用
- 存储、文件摘记
- Centos定时启动和清除任务
- Kubernetes
- java基础--while循环实现A4纸折叠次数到珠穆朗玛峰高度
- 最全的C、C++算法集合