JQuery Ajaxfileupload.js、 input异步上传图片 和多图片上传

今天来总结一下 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 存储在 一个数组中，然后在将数组传递给后台。