zoukankan      html  css  js  c++  java
  • jquery插件文件上传

            文件上传有很多jQuery插件,一般我最为常用的就是uploadify.js和ajaxfileupload.js,二者都是以file标签为依托,前者需要在页面初始化时就渲染插件,比较适合单纯的文件上传 ,如果用户操作完之后(比如选择了某个单选框或者复选框)再点击上传往后台传递的参数不会发生改变,只能页面初始化的时候把相应的参数写到formData对象中,但是样式比较好看一些;后者实用唯一的缺憾就是需要自己去设计样式。下面分别介绍二者使用。


            uploadify.js:      

                $('#file').uploadify({//前台file标签id
                    'formData': { 'Method': 'UploadFile' },//提交参数
                    'auto': true, //默认值是true,默认自动上传 ,自动上传文件会上传所有的文件,但是一个一个上传的
                    'multi': false, //默认值true 选择框内可同时选择多个文件,此处false只能选择一个
                    'uploadLimit': 30, //上传个数显示,一次只能上传一个
                    'width': 140,
                    'height': 20,
                    'fileSizeLimit': '50MB',
                    'fileTypeDesc': '上传附件类型',
                    'fileTypeExts': '*.doc;*.docx;*.xls;*.xlsx;*.jpg;*.png;*.bmp;*.pdf;*.txt;', //选择的格式
                    'fileObjName': 'Filedata', //后台获取到的文件的名称 
                    'buttonText': '浏览',
                    'swf': '../../../../uploadify/uploadify.swf',
                    'queueID': 'queue',//用于显示上传过程或作其他处理
                    'uploader': Attachements.url, //后台处理上传的URL
                    'onUploadError': function (event, ID, fileObj, errorObj) {
                        if (errorObj.type.toLowerCase() == 'file size') {
                            $.messager.alert('系統提示', '文件太大,限值50MB', 'error');
                        }
                    },
                    'onUploadSuccess': function (file, data, response) {
                       //上传成功操作
                    }
                });
            html:<div id="queue"></div><input type='file' id='file'/> 
    
          

           ajaxfileupload.js      

                  $.ajaxFileUpload({
                        url: 'webs/Sewage/AJAX/ImportData.ashx?Type=DataImport&SheetName=' + escape(sheetName),
                        type: 'post',
                        secureuri: false,
                        fileElementId: 'file1',
                        dataType: 'text',//或‘json’
                        success: function (msg, status) {
                            if (msg.indexOf("ok") > 0)
                                alert("数据导入成功!点击"查看日志"查看本次导入日志记录。");
                            else if (msg.indexOf("error") > 0) {
                                alert("数据导入完成,但导入过程出现错误!点击"查看日志"查看错误信息。");
                            }
                            else
                                alert(msg)
                            $('#file1').val('');
                        }
                    });
            <pre name="code" class="javascript">  html:<input type='file' id='file1' name='file1'/> <!--注意使用ajaxfileupload.js时html标签需要添加name属性否则后台获取不到数据-->

    
           后台代码:
    

           

                    //HttpFileCollection file = HttpContext.Current.Request.Files; 或使用这个方式   获取form所有上传的内容返回的是一个集合
                    HttpPostedFile file = HttpContext.Current.Request.Files["file1"];//
                    if (file.FileName.EndsWith("xls"))
                        extension = ".xls";
                    else
                        extension = ".xlsx";                
                    //path = "ImportData"+DateTime.Now.ToString("yyyyMMddmmss") + Path.GetExtension(file.FileName).ToLower();
                     path = DateTime.Now.ToString("yyyyMMddHHmmss")+"ImportData"+extension;
                    string filePath=HttpContext.Current.Server.MapPath("~/uploadfiles/" + path);
                    file.SaveAs(filePath);


    学无先后,达者为师
  • 相关阅读:
    Lavarel之环境配置 .env
    总结:关于留学网站使用laravel框架的总结
    新版 OSGi 即将发布
    Flex 4 的十大变化
    NetBeans IDE 6.8 Milestone 1 已经可用!
    JSF 2 简介,第 2 部分: 模板及复合组件
    JSF 2 简介,第 2 部分: 模板及复合组件
    Flex 4 的十大变化
    JSF 2 简介,第 1 部分: 流线化 Web 应用程序开发
    JSF 2 简介,第 3 部分: 事件处理、JavaScript 和 Ajax
  • 原文地址:https://www.cnblogs.com/seanchang/p/5202745.html
Copyright © 2011-2022 走看看