Jquery FormData文件异步上传 快速指南

网站中文件的异步上传是个比较麻烦的问题，不过现在通过jquery 可以很容易的解决这个问题；

使用jquery2.1版本，较老版本不支持异步文件上传功能；

表单代码：

1. <form id="fileUploadForm">
2. <input type="file" name="file" class="imageUpload"/>
3. <span id="commit">提交到服务器</span>
4. </form>

1. <form id="fileUploadForm">
2. <input type="file" name="file" class="imageUpload"/>
3. <span id="commit">提交到服务器</span>
4. </form>

<form id="fileUploadForm">
    <input type="file" name="file" class="imageUpload"/>
    <span id="commit">提交到服务器</span>
</form>

创建一个表单，里面包含一个file input

脚本代码：

1. function uploadFile() {
2. //将表单封装为一个formData对象
3. var formData = new FormData($('#fileUploadForm')[0]);
4. $.ajax({
5. url:'http://127.0.0.1:8080/image/',
6. type:'POST',
7. //将formData对象作为参数进行上传
8. data:formData,
9. contentType: false,
10. processData: false,
11. success:function (data) {
12. //文件上传成功后的处理
13. $('#showUploadContent').append('<div>name:'+data.name+'<br/>url:'+data.url+'<img src="http://192.168.1.107/'+data.url+'"></div>')
14. }
15. })
16. }
17. $(function () {
18. //为提交按钮添加点击事件
19. $('#commit').click(function () {
20. uploadFile();
21. })
22. })

1. function uploadFile() {
2. //将表单封装为一个formData对象
3. var formData = new FormData($('#fileUploadForm')[0]);
4. $.ajax({
5. url:'http://127.0.0.1:8080/image/',
6. type:'POST',
7. //将formData对象作为参数进行上传
8. data:formData,
9. contentType: false,
10. processData: false,
11. success:function (data) {
12. //文件上传成功后的处理
13. $('#showUploadContent').append('<div>name:'+data.name+'<br/>url:'+data.url+'<img src="http://192.168.1.107/'+data.url+'"></div>')
14. }
15. })
16. }
17. $(function () {
18. //为提交按钮添加点击事件
19. $('#commit').click(function () {
20. uploadFile();
21. })
22. })

function uploadFile() {
        //将表单封装为一个formData对象
        var formData = new FormData($('#fileUploadForm')[0]);
        $.ajax({
            url:'http://127.0.0.1:8080/image/',
            type:'POST',
            //将formData对象作为参数进行上传
            data:formData,
            contentType: false,
            processData: false,
            success:function (data) {
                //文件上传成功后的处理
                $('#showUploadContent').append('<div>name:'+data.name+'<br/>url:'+data.url+'<img src="http://192.168.1.107/'+data.url+'"></div>')
            }
        })
    }
    $(function () {
        //为提交按钮添加点击事件
        $('#commit').click(function () {
            uploadFile();
        })
    })

NOTE：提交按钮使用<button/> <input type="submit"/> 的情况下将会页面跳转，我使用的是<span/>元素：

<span id="commit" >提交到服务器</span>

这样进行文件上传就不会出现页面跳转，达到异步上传；