分享2个jQuery插件--jquery.fileupload与artdialog-工具盒子

这些是我们项目中必不可少的东西，所以今天推荐两个一个叫做artdialog是个iframe的jquery插件，一个叫jquery file upload,我看网上很少有这个插件jquery file upload的插件使用教程，今天我就简单的介绍和写一点使用的方法！
简单用代码举例子
最小化的方法

++复制代码++ 代码如下:

data-url是上传后执行上传文件的php方法
<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>
<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>
<script>
$(function () {
$('#fileupload').fileupload({
dataType: 'json', //josn传输
done: function (e, data) { //上传结束后执行
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo(document.body);
});
}
});
});
</script>

稍微扩展一下

++复制代码++ 代码如下:

<input id="fileupload" type="file" name="files[]" multiple>
<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>
<script>
$(function(){
//完整的API在这里https://github.com/blueimp/jQuery-File-Upload/wiki/API 我就是简单的介绍一些常用的说明
$("#fileupload").fileupload('option',{ //设置上传事件
url: 'http://localhost/php/index.php' //指定php上传方法
disableImageResize: /Android(?!.*Chrome)|Opera/
.test(window.navigator.userAgent), //禁止生成缩略图
maxFileSize : 5000000 //设置支持的最大尺寸
acceptFileTypes: /(\.|\/)(rar|zip|jp?g|png|bmp)$/i, //设置上传的类型
});
$.ajax({
url: $('#fileupload').fileupload('option', 'url'), //根据设置选项ajax传输
dataType: 'json',
context: $('#fileupload')[0]
}).done(function (result) {
$(this).fileupload('option','done'
).call(this, $.Event('done'), {result: result}); //上传完成后做的事情

});
$('#fileupload').bind('fileuploaddone',function(e,data){ //绑定上传完执行的事件
$.each(data.result.files , function (index ,file){
for(var i in file){
alert(i+':'+file[i])
}
});
//绑定的事件太多了大家直接翻译过来就明白是什么意思
$('#fileupload')
.bind('fileuploadadd', function (e, data) {/* ... */})
.bind('fileuploadsubmit', function (e, data) {/* ... */})
.bind('fileuploadsend', function (e, data) {/* ... */})
.bind('fileuploaddone', function (e, data) {/* ... */})
.bind('fileuploadfail', function (e, data) {/* ... */})
.bind('fileuploadalways', function (e, data) {/* ... */})
.bind('fileuploadprogress', function (e, data) {/* ... */})
.bind('fileuploadprogressall', function (e, data) {/* ... */})
.bind('fileuploadstart', function (e) {/* ... */})
.bind('fileuploadstop', function (e) {/* ... */})
.bind('fileuploadchange', function (e, data) {/* ... */})
.bind('fileuploadpaste', function (e, data) {/* ... */})
.bind('fileuploaddrop', function (e, data) {/* ... */})
.bind('fileuploaddragover', function (e) {/* ... */})
.bind('fileuploadchunksend', function (e, data) {/* ... */})
.bind('fileuploadchunkdone', function (e, data) {/* ... */})
.bind('fileuploadchunkfail', function (e, data) {/* ... */})
.bind('fileuploadchunkalways', function (e, data) {/* ... */});
});
});
</script>