Jquery ajax上传文件

Jquery Ajax上传文件

主要实现文件上传到后端同时显示进度
ps. 上传文件数据格式必须为form-data

<form action="Handler2.ashx" method="post" enctype="multipart/form-data">
	<p>要上传的文件<input type="file" name="file1"/></p>
	<p><input type="submit" value="提交" /></p>
</form>

传统使用form表单提交文件会出现页面刷新的情况。我们不希望刷新浏览器，使用Ajax上传文件请求（异步）。
Ajax它提供了异步更新的机制，使用客户端与服务器间交换数据而非整个页面文档，实现页面的局部更新。

JS部分

//上传音频
$(function () {
    $("#upload").click(function () {
        var fd = new FormData();
        var file = document.getElementById('file1').files[0];
        uuid.innerHTML=uuid();
        //console.log(uuid());
        var mymd5=md5.innerHTML;
        console.log(mymd5);
        var myindex=uuid.innerHTML;
        //formdata数据
        fd.append("file",file);
        fd.append("md5",mymd5);
        fd.append("app_id","system");
        fd.append("app_secret","12345");
        fd.append("seq",myindex);
        console.log(fd.get("data"));
        $("#text").html("等待数据准备...");

        $.ajax({
            //上传服务器接口
            url: "xxxx",
            type: "POST",
            data: fd,
            async:true,
            contentType: false,
            processData: false,            
            xhr: function() { //用以显示上传进度  
                var xhr = $.ajaxSettings.xhr();
                if (xhr.upload) {
                    xhr.upload.addEventListener('progress', function(event){
                        var percent = Math.round(event.loaded / event.total * 100);
                        document.getElementById("progressNumber").innerHTML= percent.toString() + "%";
                        $("#upload").hide();
                    }, false); 
                }
                return xhr 
            },
            success: function (data) {
            console.log(data);
            $("#transform").show();
            $("#text").html("");
            if (data.status == "true") {
                alert("上传成功！");   
            }
            if (data.status == "error") {
                alert(data.msg);
            }
            },
            error: function () {
                alert("上传失败！");
            }
        })
    })    
});

代码中还使用了两项技术
1.md5
计算文件的MD5，防止服务端和客户端之间数据传输出现问题，校验文件的一致性和完整性
2.uuid（通用唯一识别码）
使上传的数据不产生冲突