Dieses Mal bringe ich Ihnen das Uploadify-Plug-in, um Batch-Uploads mit Fortschrittsbalken durchzuführen. Was sind die Vorsichtsmaßnahmen für das Uploadify-Plug-in, um Batch-Uploads mit Fortschrittsbalken durchzuführen? . Lasst uns einmal einen Blick darauf werfen.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpLoad.aspx.cs" Inherits="UploadifyDemo_UpLoad" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>Jquery Uploadify上传带进度条,且多参数</title> <link href="js/jquery.uploadify-v2.1.4/uploadify.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery.uploadify-v2.1.4/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery.uploadify-v2.1.4/swfobject.js"></script> <script type="text/javascript" src="js/jquery.uploadify-v2.1.4/jquery.uploadify.v2.1.4.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#pics").hide(); $("#uploadify").uploadify({ 'uploader': 'js/jquery.uploadify-v2.1.4/uploadify.swf', //uploadify.swf文件的路径 'script': 'UploadHandler.ashx?type=add', //处理文件上传的后台脚本的路径 'cancelImg': 'js/jquery.uploadify-v2.1.4/cancel.png', 'buttonText': 'Select Image', 'folder': 'UploadFile/<% = DateTime.Now.ToString("yyyyMMdd") %>/', //上传文件夹的路径按20130416 'queueID': 'fileQueue', //页面中,你想要用来作为文件队列的元素的id 'auto': false, //当文件被添加到队列时,自动上传 'multi': true, //设置为true将允许多文件上传 'fileExt': '*.jpg;*.gif;*.png', //允许上传的文件后缀 'queueSizeLimit': 5, 'fileDesc': 'Web Image Files (.JPG, .GIF, .PNG)', //在浏览窗口底部的文件类型下拉菜单中显示的文本 'sizeLimit': 1024000, //上传文件的大小限制,单位为字节 1024*1000 1M 'onComplete': function (event, queueID, fileObj, response, data) { var html = ""; html += " <li class=\'myli\'>"; html += " <img src=\"" + response + "\" class=\'myimg\'/>"; html += " <p style=\" position:absolute; right:8px; bottom:5px\">"; html += " <img title=\"点击删除\" src=\"Images/delete.gif\" onclick=\"delImage(\'" + response + "\');\" />"; html += " </p>"; html += " </li>"; $("#pics").append(html); }, 'onAllComplete': function (event, data) { //当上传队列中的所有文件都完成上传时触发 //alert(data.filesUploaded + ' 个文件上传成功!'); $("#pics").fadeIn(); } }); }); function uploadpara() { //自定义传递参数 $('#uploadify').uploadifySettings('scriptData', { 'name': $('#txtName').val(), 'albums': $('#txtAlbums').val() }); $('#uploadify').uploadifyUpload(); } function delImage(picurl) { jsonAjax("UploadHandler.ashx", "type=del&picurl=" + picurl, "text", callBackTxt); } function jsonAjax(url, param, datat, callback) { $.ajax({ type: "post", url: url, data: param, dataType: datat, success: callback, error: function () { jQuery.fn.mBox({ message: '恢复失败' }); } }); } function callBackTxt(data) { var o = data; if (o != "") { var e = $(".myli img[src='" + data + "']"); e.each(function () { $(this).parent().remove(); }) } else { alert("删除失败"); } }; </script> <style type="text/css"> .myul { margin:5px 5px 5px 5px; padding:0px; } .myli { list-style-type:none; width:150px; height:150px; display:inline; position:relative; } .myimg { width:120px; height:120px; } </style> </head> <body> <form id="form1" runat="server"> <p> <p id="fileQueue"></p> <input type="file" name="uploadify" id="uploadify" /> <p id="pics"> <ul class="myul"> </ul> </p> <p> <p> <a href="javascript:void(0);" onclick="uploadpara();">上传</a>| <a href="javascript:$('#uploadify').uploadifyClearQueue()">取消上传</a> </p> </p> </p> </form> </body> </html>
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
So erstellen Sie eine Menü-Link-Schaltfläche mit dem jQuery EasyUI-Plug-in
Implementierung von Floating Link-Popup-Bild-Spezialeffekte
Das obige ist der detaillierte Inhalt vonDas Uploadify-Plug-in ermöglicht die Batch-Upload-Funktion mit Fortschrittsbalken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!