zoukankan      html  css  js  c++  java
  • jquery.uploadify上传文件配置详解(asp.net mvc)

    页面源码:

    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jquery upload上传文件(asp.net mvc)配置</title>
        <script src="Resources/jquery.js"></script>
        <script src="Resources/uploadify/jquery.uploadify.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#file-upload").uploadify({
                    auto: true, // 选择文件后是否自动上传,默认值:true
                    height: 30, // 按钮高度
                    swf: '/Resources/uploadify/uploadify.swf', // flash文件路径
                    uploader: '/home/UploadFile', // 服务器上传地址
                     120, // 按钮宽度
                    buttonText: "选择文件", // 按钮显示文本, 默认值:Select File
                    fileObjName: "uploadFileName", // 服务器接收文件名, 默认值:FileData
                    buttonClass: "custom-css", // 自定义按钮类样式(追加), 默认值:空
                    buttonCursor: "arrow", // 鼠标样式, 默认值:hand
                    buttonImage: null, // 按钮背景图片
                    checkExisting: false, // 如果为true, 服务器应该提供接口用于检查即将上传的文件是否已存在服务端,
                    debug: true, // 设置SWFUpload为debug模式
                    fileSizeLimit: 0, //上传文件大小限制:0无限制, 默认单位KB, 可设置成字符串如:1024MB
                    fileTypeDesc: "图片文件", // 选择框图片选择描述, 默认值 All Files
                    fileTypeExts: "*.jpg;*.gif;*.png;*.bmp;*.rar", // 选择文件后缀名过滤, 默认值*.*即所有文件。 多个后缀名采用;隔开
                    formData: { parameter1: "value1", parameter2: "value2" }, // 每个文件上传 附加的参数(json类型), 默认值:空
                    itemTemplate: false, //上传文件队列的列表模板,
                    method: "post", // 提交方式,GET|POST
                    multi: true, // 是否支持多个文件上传
                    preventCaching: false, //  阻止缓存
                    progressData: "percentage", // 进度条显示情况,percentage|speed
                    queueSizeLimit: 999,    // 每次选择上传文件队列的总数大小, 默认值:999
                    removeCompleted: true,  // 文件上传成功后移出队列, 默认值:true
                    removeTimeout: 3,    // 文件上传成功后延迟几秒移出队列, 默认值:3
                    requeueErrors: false,    //  当文件上传发生错误时,如果为true上传动作会重复操作
                    uploadLimit: 999,   // 上传文件的数量最大值,默认值:999
                    onCancel: function (fileObj) {   // 当上传文件从队列移出触发
                        console.dir(arguments);
                    },
                    onClearQueue: function (queueItemCount) {   // 当执行清除队列是触发,如$('#file-upload').uploadify('cancel','*')
                        console.dir(arguments);
                    },
                    onDestroy: function () {     // 当销毁SWFUpload是触发
                        console.log("uploadify已被销毁!");
                    },
                    onDialogClose: function (queueData) {   // 当选择文件对话框关闭时触发
                        console.dir(arguments);
                    },
                    onDialogOpen: function () {     // 当选择文件对话框打开时触发
                        console.dir(arguments);
                    },
                    onDisable: function () {     // 当调用disable方法时触发, 如:$('#file-upload').uploadify('disable', true);
                        console.log("uploadify已被禁用!");
                    },
                    onEnable: function () {     // 当调用disable方法时触发, 如:$('#file-upload').uploadify('disable', true);
                        console.log("uploadify已被开启!");
                    },
                    onFallback: function () {       // Flash版本兼容错误 触发
                        console.log("Flash不兼容!");
                    },
                    onInit: function (instance) {   //  初始化时触发
                        console.dir(arguments);
                    },
                    onQueueComplete: function (queueData) {     // 当队列中所有文件都执行完时 触发
                        console.dir(arguments);
                    },
                    onSelect: function (fileObj) {      // 当每一个选中的文件添加到上传队列时触发
                        console.dir(arguments);
                    },
                    onSelectError: function (file, errorCode, errorMsg) {    // 当每一个选中的文件添加到上传队列报错时触发
                        console.dir(arguments);
                    },
                    onSWFReady: function () {     // 当swf加载完毕和准备就绪时触发
                        console.log("swf已初始化!");
                    },
                    onUploadComplete: function (fileObj) {   // 当队列中每一个文件上传操作执行完成时触发,不管上传成功还是失败
                        console.dir(arguments);
                    },
                    onUploadError: function (fileObj, errorCode, errorMsg, errorString) {       // 当队列中每一个文件上传失败时 触发
                        console.dir(arguments);
                    },
                    onUploadProgress: function (fileObj, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {  // 队列中每一个文件上传进度事件
                        console.dir(arguments);
                    },
                    onUploadStart: function (fileObj) {      // 当队列中每一个文件上传开始时触发
                        console.dir(arguments);
                    },
                    onUploadSuccess: function (fileObj, data, response) {       // 当队列中每一个文件上传成功时触发
                        console.dir(arguments);
                    }
                });
                /**
                 *方法
                 */
                //$('#file-upload').uploadify('cancel');  // 从队列中移出第一 
                //$('#file-upload').uploadify('cancel', "*");  // 清空队列
                //$('#file-upload').uploadify('destroy');     // 销毁
                //$('#file-upload').uploadify('disable', true);   // 禁用|开启
                //$('#file-upload').uploadify('setting', "name", "value");    // 设置|获取uploadify配置
                //$('#file-upload').uploadify('stop');    // 停止
                //$('#file-upload').uploadify('upload')     // 启动上传
            });
        </script>
    </head>
    <body>
        <input type="file" name="fileName" id="file-upload" />
    </body>
    </html>

    后台程序与webconfig配置:

    <system.web>
        <httpRuntime executionTimeout="300" maxRequestLength="10240" />   <!--限制最大10MB-->
    </system.web>
    public class HomeController : Controller
    {
        [HttpPost]
        public ActionResult UploadFile()
        {
            HttpPostedFileBase postedFile = Request.Files["uploadFileName"]; // 上传文件名须一致
            if (postedFile != null)
            {
                string filePath = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, string.Format("{0}{1}", DateTime.Now.ToString("yyyyMMddHHmmsss"), Path.GetExtension(postedFile.FileName)));
                using (Stream streamReader = postedFile.InputStream)
                {
                    byte[] buffer = new byte[1024];
                    using (FileStream streamWriter = new FileStream(filePath, FileMode.Create, FileAccess.Write))
                    {
                        int read = streamReader.Read(buffer, 0, buffer.Length);
                        while (read > 0)
                        {
                            streamWriter.Write(buffer, 0, buffer.Length);
                            read = streamReader.Read(buffer, 0, buffer.Length);
                        }
                        streamWriter.Flush();
                        streamWriter.Close();
                        streamWriter.Dispose();
                        streamReader.Flush();
                        streamReader.Close();
                        streamReader.Dispose();
                        return Content("1");
                    }
                }
            }
            return Content("0");
        }
    }
  • 相关阅读:
    简单后台登录逻辑实现Controller
    自学semantic UI个人博客首页模板
    Spring Boot日志处理
    Thymeleaf静态资源引入方式及公共页面代码抽取
    一个简单SpringBoot应用的pom.xml文件
    Spring Boot入门程序
    easyuUI实现客户分页显示逻辑分析
    easyui自学模板代码
    网络协议-webService协议
    【转】彻底搞透Netty框架
  • 原文地址:https://www.cnblogs.com/GodX/p/4221881.html
Copyright © 2011-2022 走看看