jqueryfileupload使用难点

来源：互联网发布：微信视频制作知乎编辑：程序博客网时间：2024/05/13 04:56

如果只是想基本使用，不考虑样式的问题，则添加如下引用即可

    <link href="jQuery-File-Upload-master/css/jquery.fileupload.css" rel="stylesheet" />    <link href="jQuery-File-Upload-master/css/jquery.fileupload-ui.css" rel="stylesheet" />    <script src="Scripts/jquery-3.1.1.js"></script>    <script src="jQuery-File-Upload-master/js/vendor/jquery.ui.widget.js"></script>    <script src="jQuery-File-Upload-master/js/jquery.fileupload.js"></script>    <script src="jQuery-File-Upload-master/js/jquery.iframe-transport.js"></script>

然后添加一个input

 <input id="fileupload" type="file" name="files[]" multiple>

JS代码：选择文件之后即可上传，不需要上传按钮

 $(function () {            $('#fileupload').fileupload({                url: "/jQuery-File-Upload-master/server/dotnet/Default.aspx",                done: function (e, data) {                    var json = $.parseJSON(data.result);                    console.log(json[0].delete_url);                                    }            });        })

此控件功能比较完善，还能够删除文件，只要发一个 DELETE 请求即可，请求地址则在返回得JSON数据中已经存在，添加删除按钮后，修改JS代码如下

 $(function () {            $('#fileupload').fileupload({                url: "/jQuery-File-Upload-master/server/dotnet/Default.aspx",                done: function (e, data) {                    var json = $.parseJSON(data.result);                    console.log(json[0].delete_url);                    $("#btn1").click(function () {                        $.ajax({                            type: "DELETE",                            url: json[0].delete_url,                            success: function (data) {                                console.log(data);                            }                        })                    })                }            });        })

关键问题在于服务器默认不接受 DELETE 请求，所以需要在 IIS Express 中进行修改，因为请求的是 .aspx 文件，所以做如下修改即可（添加 DELETE 请求）

  <add name="PageHandlerFactory-Integrated-4.0" path="*.aspx" verb="GET,HEAD,POST,DEBUG,DELETE" type="System.Web.UI.PageHandlerFactory" preCondition="integratedMode,runtimeVersionv4.0" />

0 0