Jquery.Uploadify實現批量上傳顯示進度條 取消 上傳後縮略圖顯示 可刪除




    Jquery Uploadify上傳帶進度條,且多參數
    
    <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//', //上傳文件夾的路徑按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 += "    
  • "; html += " "; html += "

    "; html += " "; html += "

    "; html += "
  • "; $("#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> .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; }

    上傳| 取消上傳

    
    using System;
    using System.Web;
    using System.IO;
    
    /// 
    /// UploadHandler文件上傳
    /// 
    public class UploadHandler : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Charset = "utf-8";
    
            string type = context.Request["type"];
            if (type=="add")
            {
                HttpPostedFile file = context.Request.Files["Filedata"];
                string uploadPath = HttpContext.Current.Server.MapPath(@context.Request["folder"]);
                string name = context.Request.Params["name"]; //獲取傳遞的參數
                string albums = context.Request.Params["albums"];
                if (file != null)
                {
                    if (!Directory.Exists(uploadPath))
                    {
                        Directory.CreateDirectory(uploadPath);
                    }
                    file.SaveAs(Path.Combine(uploadPath, file.FileName));
                    context.Response.Write(@context.Request["folder"] + file.FileName);
                }
                else
                {
                    context.Response.Write("");
                }
            }
            else if (type == "del")
            {
                string picurl = context.Request["picurl"];
                try
                {
                    File.Delete(context.Server.MapPath(picurl));
                    context.Response.Write(picurl);
                }
                catch
                {
                    context.Response.Write("");
                }          
            }
            else
            { }
        }
    
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

    發佈留言