本站web端文件文件提交即便用此插件,效果以下:前端
浏览器支持
浏览器支持:IE 8.0,IE 9.0,IE 10.0,Firefox,Safari,Opera,Chrome
支持文件拖拽上传的浏览器:IE10+,Firefox,Safari,Opera,Chromejquery
使用方法
1.在页面head节点添加css和js文件引用git
<link href="/jQuery-Upload-File/uploadfile.min.css" rel="stylesheet"> <script src="/jquery/1.9.1/jquery.min.js"></script> <script src="/jQuery-Upload-File/jquery.uploadfile.min.js"></script>
因为此插件依赖jQuery插件,所以以上示例也添加了就jQuery库的引用。别外在jQuery Upload File的源码中引用在jQuery Form插件,在使用时应作相应检查,确保jQuery Form插件的可访问性。github
2.在页面的body节点中添加一个div处理上传文件web
<div id="fileuploader">Upload</div>
3.添加js启动脚本ajax
$(document).ready(function() { $("#fileuploader").uploadFile({ url:"文件上传url", fileName:"myfile" }); });
本站的初始化示例
本站上传文章封面图时使用了jQuery Upload File插件,用于前端数据提交。json
$("#fileuploader").uploadFile({ url:"/file/upload", //文件上传url fileName:"image", //提交到服务器的文件名 maxFileCount: 1, //上传文件个数(多个时修改此处 returnType: 'json', //服务返回数据 allowedTypes: 'jpg,jpeg,png,gif', //容许上传的文件式 showDone: false, //是否显示"Done"(完成)按钮 showDelete: true, //是否显示"Delete"(删除)按钮 onLoad: function(obj) { //页面加载时,onLoad回调。若是有须要在页面初始化时显示(好比:文件修改时)的文件须要在此方法中处理 obj.createProgress('/tmpImage.jpg'); //createProgress方法能够建立一个已上传的文件 }, deleteCallback: function(data,pd) { //文件删除时的回调方法。 //如:如下ajax方法为调用服务器端删除方法删除服务器端的文件 $.ajax({ cache: false, url: "file/upload", type: "DELETE", dataType: "json", data: {file:data.url}, success: function(data) { if(data.code===0){ pd.statusbar.hide(); //删除成功后隐藏进度条等 $('#image').val(''); }else{ console.log(data.message); //打印服务器返回的错误信息 } } }); }, onSuccess: function(files,data,xhr,pd) { //上传成功后的回调方法。本例中是将返回的文件名保到一个hidden类开的input中,以便后期数据处理 if(data&&data.code===0){ $('#image').val(data.url); } } });
根据以上介绍,及本站的使用示例,已经能够这个高大上的、有进度的文件上传插件了。更多设置及使用方法请自行参考其github源代码:jQuery Upload File浏览器