Uploadify插件使用方法

1、下载所需文件

2、导入所需文件，还需要应用jquery.js文件

3、导入css、js

　　　　uploadify.css、jquery.uploadify.min.js

4、前端代码

　　　　p标签存放uploadify，input的目的是存取上传成功时，图片的相对路径。

<p id="uploadify"></p>
<input id="imagespath" name="ImagesPath" type="hidden" value="" />

　　　　js代码，需要注意的是，服务端处理的地址，以及上传成功时的事件处理程序。重写事件时，要把事件加入overrideEvents数组中，具体可查看js源代码。

 $(‘#uploadify‘).uploadify({
            uploader: ‘/uploadhandler.ashx‘,           // 服务器端处理地址
            swf: ‘/scripts/uploadify/uploadify.swf‘,    // 上传使用的 Flash

            width: 80,                          // 按钮的宽度
            height: 23,                         // 按钮的高度
            buttonText: "图片上传",                 // 按钮上的文字
            buttonCursor: ‘hand‘,                // 按钮的鼠标图标

            fileObjName: ‘Filedata‘,            // 上传参数名称

            overrideEvents: [‘onDialogClose‘, ‘onUploadSuccess‘, ‘onSelectError‘, ‘onUploadError‘],   //要重写的事件
            onUploadSuccess: function (file, data, response) {
                bootbox.alert("上传成功");

                $("#imagespath").val(data).after(‘<img src="‘ + data + ‘" style="width: 150px;height: 100%" id="upload" />‘);

            },
            removeCompleted: true,               // 上传成功后移除进度条
            fileSizeLimit: "4MB",                  // 文件大小限制
            onSelectError: function (file, errorCode, errorMsg) {
                var msgText = "上传失败\n";
                switch (errorCode) {
                    case SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED:
                        //this.queueData.errorMsg = "每次最多上传 " + this.settings.queueSizeLimit + "个文件";
                        msgText += "每次最多上传 " + this.settings.queueSizeLimit + "个文件";
                        break;
                    case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
                        msgText += "文件大小超过限制( " + this.settings.fileSizeLimit + " )";
                        break;
                    case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
                        msgText += "文件大小为0";
                        break;
                    case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
                        msgText += "文件格式不正确，仅限 " + this.settings.fileTypeExts;
                        break;
                    default:
                        msgText += "错误代码：" + errorCode + "\n" + errorMsg;
                }
                bootbox.alert(msgText);

            },
            onUploadError: function (file, errorCode, errorMsg) {
                // Load the swfupload settings
                var settings = this.settings;

                // Set the error string
                var errorString = ‘上传失败‘;
                switch (errorCode) {
                    case SWFUpload.UPLOAD_ERROR.HTTP_ERROR:
                        errorString = ‘服务器错误 (‘ + errorMsg + ‘)‘;
                        break;
                    case SWFUpload.UPLOAD_ERROR.MISSING_UPLOAD_URL:
                        errorString = ‘Missing Upload URL‘;
                        break;
                    case SWFUpload.UPLOAD_ERROR.IO_ERROR:
                        errorString = ‘IO Error‘;
                        break;
                    case SWFUpload.UPLOAD_ERROR.SECURITY_ERROR:
                        errorString = ‘Security Error‘;
                        break;
                    case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED:
                        alert(‘The upload limit has been reached (‘ + errorMsg + ‘).‘);
                        errorString = ‘Exceeds Upload Limit‘;
                        break;
                    case SWFUpload.UPLOAD_ERROR.UPLOAD_FAILED:
                        errorString = ‘Failed‘;
                        break;
                    case SWFUpload.UPLOAD_ERROR.SPECIFIED_FILE_ID_NOT_FOUND:
                        break;
                    case SWFUpload.UPLOAD_ERROR.FILE_VALIDATION_FAILED:
                        errorString = ‘Validation Error‘;
                        break;
                    case SWFUpload.UPLOAD_ERROR.FILE_CANCELLED:
                        errorString = ‘Cancelled‘;
                        this.queueData.queueSize -= file.size;
                        this.queueData.queueLength -= 1;
                        if (file.status == SWFUpload.FILE_STATUS.IN_PROGRESS || $.inArray(file.id, this.queueData.uploadQueue) >= 0) {
                            this.queueData.uploadSize -= file.size;
                        }
                        // Trigger the onCancel event
                        if (settings.onCancel) settings.onCancel.call(this, file);
                        delete this.queueData.files[file.id];
                        break;
                    case SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED:
                        errorString = ‘Stopped‘;
                        break;
                }
                bootbox.alert(errorString);
            },
            // 两个配套使用
            fileTypeExts: "*.jpg;*.png",             // 扩展名
            fileTypeDesc: "请选择 jpg png 文件",     // 文件说明

            auto: true,                // 选择之后，自动开始上传
            multi: true,               // 是否支持同时上传多个文件
            queueSizeLimit: 5          // 允许多文件上传的时候，同时上传文件的个数
        });

5、后台处理程序

　　　　新建一个一般处理程序，注意js中修改地址。Filedata注意与前端保持一致。在这里我们使用文件的MD5值为文件名存放，保存的时候重复文件会直接覆盖。这样就不会有重复的文件。创建目录的时候，按照年月日来分层。保存成功，把文件的相对地址发送到前端，前端添加一个img标签显示图片，hidden标签存放路径地址，以待下一步存到数据库中。

  HttpPostedFile file = context.Request.Files["Filedata"];
            if (file == null)
            {
                context.Response.Write("上传为空");
            }
            else
            {
                string filename = Path.GetFileName(file.FileName);
                string ext = Path.GetExtension(filename);
                filename = MD5Helper.GetStreamMD5(file.InputStream); //使用文件的md5值作为文件名，相同文件直接覆盖存储
                string path = "/ImageUpload/" + DateTime.Now.Year + "/" + DateTime.Now.Month + "/" + DateTime.Now.Day +
                              "/";
                Directory.CreateDirectory(context.Server.MapPath(path));
                file.SaveAs(context.Server.MapPath(path + filename + ext));
                context.Response.Write(path + filename + ext);
            }