jquery.fileupload插件的简易使用日志

本文内容主要包含fileupload插件传递参数和取回服务器返回数据的方法

jquery.fileupload官网：http://blueimp.github.io/jQuery-File-Upload/

fileupload是一个jquery下的ajax文件上传插件

下载下来的包东西很多，很多也是没必要的，这里只谈谈最小级别的应用

首先，依赖js:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>

缺一不可（如果已经引入jquery-ui包则jquery.ui.wiget.js不需要再次引入）
大部分资料其实官网上都能找到，说点官网没有的或者说的不够清楚的
附上官方API:https://github.com/blueimp/jQuery-File-Upload/wiki/API

调用方式：

<input type="file" name="files" id="fileupload_input" />

$("#fileupload_input").fileupload({
    url:"files/upload",//文件上传地址，当然也可以直接写在input的data-url属性内
    formData:{param1:"p1",param2:"p2"},//如果需要额外添加参数可以在这里添加
    done:function(e,result){
        //done方法就是上传完毕的回调函数，其他回调函数可以自行查看api
        //注意result要和jquery的ajax的data参数区分，这个对象包含了整个请求信息
        //返回的数据在result.result中，假设我们服务器返回了一个json对象
        console.log(JSON.stringify(result.result));
    }
})

评论

4 楼 love_chengjiang 2014-08-06  

都是这句话惹的祸：
“如果已经引入jquery-ui包则jquery.ui.wiget.js不需要再次引入”
不加入jquery.ui.wiget.js，是不会自动提交的。

3 楼 yixiandave 2014-05-09  

rjw 写道

楼主，你这么写，能跑起吗？只能选择文件，不能提交啊。 求教了。。。

之前的项目找不到了，印象中选完文件会直接提交的

2 楼 rjw 2014-05-08  

楼主，你这么写，能跑起吗？只能选择文件，不能提交啊。 求教了。。。

1 楼 lr2007 2014-02-18  

写的啥子嘛
晕哦