精华内容
下载资源
问答
  • easyui附件上传下载
    千次阅读
    2017-03-28 17:22:34

    前段时间写的一个系统需要实现在行编辑中上传附件的功能,最开始使用< input type=”file” />,但是提交表单的时候无法获取标签中的内容。后来使用先上传附件的方法实现这个功能。

    使用技术:springMVC easyui ajax

    思路大致如下:在行编辑中写一个链接,如“上传”、“附件”等等,点击链接弹出上传附件的页面,上传附件后后台处理,把路径传回jsp并接收,更新路径到行编辑中。后台读取有改变的行的数据,更新到数据库。

    1、编写可编辑行表格

     <table id="mydatagrid" style="width:800px">
               </table>         
                      <script>
                $('#mydatagrid').datagrid({
                    toolbar:'#tb',
                    nowrap: false,
                    striped: true,
                    collapsible:true,
                    url:'<%=request.getContextPath()%>/apps/appTest.do?method=json&id=${appTest.id}',
                    remoteSort: false,
                    singleSelect:true,
                    idField:'id',
                    columns:[[
    
                    {title:'文本1',field:'text1', width:120,align:'center',
                        editor : {type :"validatebox",options : {  required: true}}},               
                    {title:'文本2(提示内容)',field:'text2', width:140,align:'center',
                        editor : {type :"validatebox",options : {  required: true,missingMessage:'这里写提示内容'}}},
                    {title:'数字',field:'number1', width:80,align:'center',
                        editor : {type :"numberbox",options : {  required: true ,
                        min:0,
                        validType:'number',
                        missingMessage:'请输入数字'}}},          
                    {title:'路径',field:'filePath',hidden:true, width:100,align:'center',
                        editor : {type :"validatebox",options : {  }}},   
                    {title:'附件',field:'file',width:180,align:'center',
                        formatter:function (value, row, index) {
                            if(row.resultFile != "" && row.resultFile != null) {
                                var arr = row.resultFile.split('\\');
                                var resultFileName = arr[arr.length-1];
                                var download = "<a href='<%=request.getContextPath()%>/apps/appTest.do?method=download&filepath="+row.filePath+"'>"+下载+"</a>";                      
                                var upload = "<a href='#' onclick='addFile("+index+");'>上传</a>";
                                return download+"<br>"+upload;
                            }else{                      
                                var str = "<a href='#' onclick='addFile("+index+");'>上传</a>";
                                return str;
                            }
                        }
                    }
                    ]],
                    pagination:false,
                    onDblClickRow: onRowClick 
                });
    
        function onRowClick(rowIndex, row){
            $('#mydatagrid').datagrid('beginEdit', rowIndex);
        }           
    
        function addNew(){
            $('#mydatagrid').datagrid('endEdit', lastIndex);       
            $('#mydatagrid').datagrid('appendRow');        
            var lastIndex = $('#mydatagrid').datagrid('getRows').length-1;
            $('#mydatagrid').datagrid('selectRow', lastIndex);
            $('#mydatagrid').datagrid('beginEdit', lastIndex);
    
        }
        function endEdit(){
            var rows = jQuery("#mydatagrid").datagrid('getRows');  
            for ( var i = 0; i < rows.length; i++) {  
                jQuery("#mydatagrid").datagrid('endEdit', i);
            }       
        }
        function deleteSelections(){
            endEdit();
    
            var rows = jQuery('#mydatagrid').datagrid("getSelections"); 
            if(rows == null || rows.length <=0){
                jQuery.messager.alert("info","请选中一行!", "info");
                return;
            }
    
            var copyRows = [];
            for ( var j= 0; j < rows.length; j++) {
                copyRows.push(rows[j]);
            }
            for(var i =0;i<copyRows.length;i++){    
                var index = jQuery('#mydatagrid').datagrid('getRowIndex',copyRows[i]);
                jQuery('#mydatagrid').datagrid('deleteRow',index); 
            }
    
        }
    function addFile() {
            //打开上传附件页面时需要先将行编辑结束编辑,否则更新路径回行编辑页面时会把其他内容清空
            endEdit();  
            var link = '<%=request.getContextPath()%>/apps/appTest.do?method=addFile;
            jQuery.layer({
                type: 2,
                shade: [0.5, '#000'],
                fix: false,
                title: '上传附件',
                iframe: {src : link},
                area: ['340px' , '180px']
            }); 
        }
    </script>
    

    2、上传附件upload.jsp

    <%@ page contentType="text/html;charset=UTF-8" %>
    
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <script type="text/javascript" charset="utf-8">
        var contextPath="<%=request.getContextPath()%>";
        function saveData(){
            var params = jQuery("#iForm").serializeJson();  
            var isValid = $("#iForm").form('validate');
        //通过ajax异步提交表单,提交成功后后台返回data
            $.ajaxFileUpload({
                type:"POST",
                url:'<%=request.getContextPath()%>/apps/appTest.do?method=uploadFile',
                data:params,
                dataType:'json',
                fileElementId:['uploadFile'],
                error:function(data){
                    alert('提交失败');
                },
                success:function(data){
                    if(data != null && data.message != null){
                        parent.layer.alert(data.message, 1);
                    } else {
                        parent.layer.alert('操作成功!', 1);
                    }
                    //接收返回的filePath
                    var file = JSON.stringify(data.filePath);
                    var filePath = file.replace(/\"/g,"");
                    //使用updateRow将filePath更新回父页面,即行编辑的页面
                    parent.$('#mydatagrid').datagrid('updateRow', { index:${index} , row: { filePath: filePath} });
                    closeDiv();
    
                }
            });
        }
        function closeDiv(){
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);  
        }
    </script>
    </head>
    
    <body style="margin:5px;">
    <div class="easyui-layout" data-options="fit:true">  
      <div data-options="region:'center',border:false,cache:true">
      <form id="iForm" name="iForm" method="post">
      <input type="hidden" id="id" name="id" value=""/>
    
      <table class="easyui-form" style="width:300px;" align="center">    
            <tr>        
                <td align="left">
                    <input name="uploadFile" type="file" id="uploadFile"/>
                </td>           
            </tr>
            <tr>
                <td colspan="4" align="center">
                <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'" onclick="javascript:saveData();" >保存</a> 
                <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" onclick="javascript:closeDiv();" >关闭</a>
                </td>
            </tr>   
      </table>
      </form>
    </div>
    </div>
    </body>
    </html>

    3、上传附件的jsp文件中使用ajax异步提交表单,上传成功后后台返回上传的路径到前端

        @RequestMapping(params = "method=uploadFile")
        @ResponseBody
        public byte[] uploadFile(@RequestParam("uploadFile") CommonsMultipartFile file)
                throws IOException {
            JSONObject jsonObject = new JSONObject();
    
            String path = "";
            try {// 上传文件
                //取得文件名         
                fileName = file.getOriginalFilename()+"_"+new Date().getTime();
                // 获得上传附件的服务器端路径.
                path = request.getSession().getServletContext().getRealPath("/upload");
                // 创建文件类型对象:
                File newFile=new File(path+"/"+fileName);
                //通过CommonsMultipartFile的方法直接写文件
                file.transferTo(newFile);
                //保存在数据库中的相对路径
                String filePath = "upload/"+fileName;
                jsonObject.put("filePath", filePath);
            } catch (Exception e) {
                e.printStackTrace();
            }
            return jsonObject.toString().getBytes("UTF-8");
    
        }
    更多相关内容
  • asp.net mvc+easyui附件上传
  • 这篇文章主要介绍了基于MVC4+EasyUI的Web开发框架之附件上传组件uploadify的使用,需要的朋友可以参考下1、上传组件uploadify的说明及脚本引用Uploadify 是 JQuery 一个著名的上传插件,利用 Flash 技术,Uploadify ...

    这篇文章主要介绍了基于MVC4+EasyUI的Web开发框架之附件上传组件uploadify的使用,需要的朋友可以参考下

    1、上传组件uploadify的说明及脚本引用

    Uploadify 是 JQuery 一个著名的上传插件,利用 Flash 技术,Uploadify 越过浏览器的限制,控制了整个上传的处理过程,实现了客户端无刷新的文件上传,这样就实现了在客户端的上传进度控制,所以,你首先要确定浏览器中已经安装了 Adobe 的 Flash 插件。

    Uploadify 当前有两个版本,基于 Flash 是免费的,还有基于 HTML5 的收费版,我们使用免费版,当前版本为v3.2.1。

    这个组件需要Jquery库的支持,一般情况下,需要添加Jquery的js库,如下所示

    不过由于我的Web开发框架是基于EasyUI的,一般在网页的开始就会引用相关的类库,已经包含了Jquery的类库了,如下所示。

    @*添加Jquery,EasyUI和easyUI的语言包的JS文件*@

    所以我们只需要添加Javascript类库(jquery.uploadify.js),另外加上他的样式文件(uploadify.css)即可:

    @*添加对uploadify控件的支持*@

    @**@

    2、上传组件uploadify在Web界面的使用

    首先我们需要在HTML代码中放置两个控件,一个是用来上传的控件,一个是用来显示已上传列表的控件,还有就是添加上传和取消上传的按钮操作,如下所示。

    附件上传:

    οnclick="javascript: $('#file_upload').uploadify('upload', '*')">上传

    οnclick="javascript: $('#file_upload').uploadify('cancel', '*')">取消

    界面效果初始化如下所示:

    d9eddfe7551193e0476010e24c41f1b9.png

    当然,下一步我们需要添加相应的文件上传初始化的操作脚本代码,如下所示。

    $(function () {

    //添加界面的附件管理

    $('#file_upload').uploadify({

    'swf': '/Content/JQueryTools/uploadify/uploadify.swf', //FLash文件路径

    'buttonText': '浏 览', //按钮文本

    'uploader': '/FileUpload/Upload', //处理文件上传Action

    'queueID': 'fileQueue', //队列的ID

    'queueSizeLimit': 10, //队列最多可上传文件数量,默认为999

    'auto': false, //选择文件后是否自动上传,默认为true

    'multi': true, //是否为多选,默认为true

    'removeCompleted': true, //是否完成后移除序列,默认为true

    'fileSizeLimit': '10MB', //单个文件大小,0为无限制,可接受KB,MB,GB等单位的字符串值

    'fileTypeDesc': 'Image Files', //文件描述

    'fileTypeExts': '*.gif; *.jpg; *.png; *.bmp;*.tif;*.doc;*.xls;*.zip', //上传的文件后缀过滤器

    'onQueueComplete': function (event, data) { //所有队列完成后事件

    ShowUpFiles($("#Attachment_GUID").val(), "p_files"); //完成后更新已上传的文件列表

    $.messager.alert("提示", "上传完毕!"); //提示完成

    },

    'onUploadStart' : function(file) {

    $("#file_upload").uploadify("settings", 'formData', { 'folder': '政策法规', 'guid': $("#Attachment_GUID").val() }); //动态传参数

    },

    'onUploadError': function (event, queueId, fileObj, errorObj) {

    //alert(errorObj.type + ":" + errorObj.info);

    }

    });

    在上面的脚本中,均有注释,一看就明白相关的属性了,不明白的也可以到官方网站去查找了解。值得注意的就是

    'uploader': '/FileUpload/Upload'

    这行就是提交文件给MVC的Action进行处理,我们在控制器FileUpload的 Upload处理即可。

    另外,在附件上传完毕后,我们需要对所在的界面进行更新,以便显示已上传的列表,那么我们需要增加下面的函数处理即可。

    'onQueueComplete': function (event, data) {

    最后说明非常值得注意的地方,就是文件上传的时候,我们需要动态获取界面上的一些元素的值,作为参数传递,那么我们就需要在onUploadStart函数中进行如下处理。

    $("#file_upload").uploadify("settings", 'formData', { 'folder': '政策法规', 'guid': $("#Attachment_GUID").val() }); //动态传参数

    3、上传组件uploadify的C#后台处理代码

    在上面的传递参数中,我使用了中文数值,一般情况下,这样会在后台拿到中文乱码,所以我们需要在控制器的Action的函数里面设置它的内容格式,如下所示。

    ControllerContext.HttpContext.Request.ContentEncoding = Encoding.GetEncoding("UTF-8");

    ControllerContext.HttpContext.Response.ContentEncoding = Encoding.GetEncoding("UTF-8");

    ControllerContext.HttpContext.Response.Charset = "UTF-8";

    控制器FileUpload的后台处理Action代码完整如下所示:

    public class FileUploadController : BaseController

    {

    [AcceptVerbs(HttpVerbs.Post)]

    public ActionResult Upload(HttpPostedFileBase fileData, string guid, string folder)

    {

    if (fileData != null)

    {

    try

    {

    ControllerContext.HttpContext.Request.ContentEncoding = Encoding.GetEncoding("UTF-8");

    ControllerContext.HttpContext.Response.ContentEncoding = Encoding.GetEncoding("UTF-8");

    ControllerContext.HttpContext.Response.Charset = "UTF-8";

    // 文件上传后的保存路径

    string filePath = Server.MapPath("~/UploadFiles/");

    DirectoryUtil.AssertDirExist(filePath);

    string fileName = Path.GetFileName(fileData.FileName); //原始文件名称

    string fileExtension = Path.GetExtension(fileName); //文件扩展名

    string saveName = Guid.NewGuid().ToString() + fileExtension; //保存文件名称

    FileUploadInfo info = new FileUploadInfo();

    info.FileData = ReadFileBytes(fileData);

    if (info.FileData != null)

    {

    info.FileSize = info.FileData.Length;

    }

    info.Category = folder;

    info.FileName = fileName;

    info.FileExtend = fileExtension;

    info.AttachmentGUID = guid;

    info.AddTime = DateTime.Now;

    info.Editor = CurrentUser.Name;//登录人

    //info.Owner_ID = OwerId;//所属主表记录ID

    CommonResult result = BLLFactory.Instance.Upload(info);

    if (!result.Success)

    {

    LogTextHelper.Error("上传文件失败:" + result.ErrorMessage);

    }

    return Content(result.Success.ToString());

    }

    catch (Exception ex)

    {

    LogTextHelper.Error(ex);

    return Content("false");

    }

    }

    else

    {

    return Content("false");

    }

    }

    private byte[] ReadFileBytes(HttpPostedFileBase fileData)

    {

    byte[] data;

    using (Stream inputStream = fileData.InputStream)

    {

    MemoryStream memoryStream = inputStream as MemoryStream;

    if (memoryStream == null)

    {

    memoryStream = new MemoryStream();

    inputStream.CopyTo(memoryStream);

    }

    data = memoryStream.ToArray();

    }

    return data;

    }

    4、上传组件uploadify在Web开发框架中的界面展示

    具体上传组件在的Web开发框架中界面效果如下所示,下图是总体的列表中附件的展示。

    d9fc69c610a47aa7dbc4231882d6380e.png

    附件编辑和上传界面如下所示。

    c8a620b9982ecdf2b39c34696b6ed65f.png

    附件信息查看效果如下所示:

    f0a249b44b987dd586f1d2d263bac7d4.png

    展开全文
  • 我在较早之前的随笔《基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用》Web框架介绍中介绍了基于Uploadify的文件上传操作,免费版本用的是Jquery+Flash实现文件的上传处理,HTML5收费版本的没有...

    我在较早之前的随笔《基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用》Web框架介绍中介绍了基于Uploadify的文件上传操作,免费版本用的是Jquery+Flash实现文件的上传处理,HTML5收费版本的没有试过。随着Flash逐渐退出整个环境,很多浏览器都可能不再支持Flash的了,因此在更新原有EasyUI整个框架的时候,我们对框架全面进行了完善,包括替换了这个Uploadify的文件上传模块,使用EasyUI内置的FileBox控件,结合Jquery的Ajax操作,我们就可以实现了单文件或者多文件的上传操作了。本篇随笔就主要基于这个主题,介绍基于FileBox控件实现文件上传处理,包括前端页面代码和后端的C#处理代码的操作。

    1、FileBox控件的使用

    FileBox控件原理上是一个TextBox控件和隐藏的一个File控件,因此对于TextBox控件的变化时间onchange依旧可以使用,而由于其隐藏了File控件,那么需要根据DOM规则获取其下面的File控件,从而可以获得文件列表进行Ajax的上传操作,同时由于File文件是一个特殊的内容,我们在上传的时候,使用了JS的FormData对象容器来进行承载文件信息和其他信息,从而能够顺利把文件及其他内容信息一并通过AJax调用,上传到后台去处理。

    按照官方的示例,其实就是定义一个HTML元素,并通过脚本方式初始化对应的样式和事件即可,如下所示。

    //初始化脚本

    $('#fb').filebox({

    buttonText: '选择文件',

    buttonAlign: 'left'

    })

    这样就可以了。

    我们来看看我的实际案例,一般需要上传附件的地方,包括导入Excel文件的记录,或者上传文件作为记录的附件,前者一般是单文件的方式,一次导入一个Excel文件,并加载Excel进行展示,如下所示。

    b455cf9d8646

    image

    文件控件的部分代码如下所示

    Excel导入操作

    和前面Demo的定义类似,这里只是声明了一个FileBox控件,主要还是通过JS代码来进行初始化,和相关的控制。

    $(function () {

    //添加对话框,上传控件初始化

    $('#file_upload').filebox({

    buttonText: '选择文件', //按钮文本

    buttonAlign: 'right', //按钮对齐

    //multiple: true, //是否多文件方式

    //accept: "image/gif,image/bmp,image/jpeg,image/jpg,image/png", //指定文件类型

    onChange: function (e) {

    UploadFile(this, "file_upload", "AttachGUID", "div_files");//上传处理

    }

    });

    });

    通过JS的控制,就可以较好的呈现文件上传的控件了,比不用EasyUI的样式好看很多。

    b455cf9d8646

    image

    通过onchange的控制,可以对文件操作及时进行响应,如我这里选择文件后,马上进行上传,并进行数据的读取和显示在Datagrid里面。

    文件上传的JS逻辑代码如下所示,全部贴出来供参考。

    //上传文件操作

    function UploadFile(_obj, file_ctrlname, guid_ctrlname, div_files) {

    var value = $("#" + file_ctrlname).filebox('getValue');

    var files = $("#" + file_ctrlname).next().find('input[type=file]')[0].files;

    //console.log(files);

    //传入this参数,也可以用这个获取文件

    //var files = $(_obj).context.ownerDocument.activeElement.files;

    //console.log(files);

    var guid = $("#" + guid_ctrlname).val();

    if (value && files[0]) {

    //构建一个FormData存储复杂对象

    var formData = new FormData();

    formData.append("folder", '数据导入文件');

    formData.append("guid", guid);

    formData.append('Filedata', files[0]);//默认的文件数据名为“Filedata”

    $.ajax({

    url: '/FileUpload/Upload', //单文件上传

    type: 'POST',

    processData: false,

    contentType: false,

    data: formData,

    success: function (json) {

    //转义JSON为对象

    var data = $.parseJSON(json);

    //提示用户Excel格式是否正常,如果正常加载数据

    ShowUpFiles(guid, div_files);

    $.ajax({

    url: '/BillDetail_Cust/CheckExcelColumns?guid=' + guid,

    type: 'get',

    dataType:'json',

    success: function (data) {

    if (data.Success) {

    InitGrid(); //重新刷新表格数据

    showTips("文件已上传,数据加载完毕!");

    }

    else {

    showTips("上传的Excel文件检查不通过。请根据页面右上角的Excel模板格式进行数据录入。");

    }

    }

    });

    },

    error: function (xhr, status, error) {

    $.messager.alert("提示", "操作失败"); //xhr.responseText

    }

    });

    }

    }

    我们这里使用了FormData来存储文件复杂对象。

    var formData = new FormData();

    通过查询控件的子DOM对象,我们获得File控件对象,并获取控件里面的Files属性。

    var files = $("#" + file_ctrlname).next().find('input[type=file]')[0].files;

    文件上传后,我们在文件框下面显示已经上传的文件列表,如下代码所示。

    ShowUpFiles(guid, div_files);

    文件上传到服务器后,我们通过接口获取对应的Excel文件,并转换为JSON列表返回,供页面绑定数据展示。

    InitGrid(); //重新刷新表格数据

    上传文件展示列表信息,整体界面效果如下所示。

    b455cf9d8646

    image

    单击删除,弹出确认删除对话框后移除文件即可。

    b455cf9d8646

    image

    上面通过限定,使用了一个文件,以及可以指定上传文件的格式等,如果我们使用多文件上传,客户端只需要设置Multiple为True即可,后端也不需要调整接口 ,使用同一个接口进行处理即可。

    多文件的上传场景,一般是某个记录需要上传文件的情况下,在录入或者编辑界面提供文件上传处理,如下所示。

    b455cf9d8646

    image

    我们这里可以选择多个文件进行一并上传,初始化fileBox控件的时候,只需要指定multiple为true即可。

    //添加对话框,上传控件初始化

    $('#file_upload').filebox({

    buttonText: '选择文件', //按钮文本

    buttonAlign: 'right', //按钮对齐

    multiple: true,

    //accept: "image/gif,image/bmp,image/jpeg,image/jpg,image/png", //指定文件类型

    onChange: function (e) {

    UploadFile(this, "file_upload", "Attachment_GUID", "div_files");//上传处理

    }

    });

    文件的上传和前面操作类似,只不过,我们这次添加了多个文件。

    //构建一个FormData存储复杂对象

    var formData = new FormData();

    formData.append("folder", '政策法规');

    formData.append("guid", guid);

    for (var i = 0; i < files.length; i++) {

    formData.append('Filedata', files[i]);//注意:默认的文件数据名为“Filedata”

    }

    最后也是统一通过ajax进行条用处理

    $.ajax({

    url: '/FileUpload/Upload',

    type: 'POST',

    processData: false,

    contentType: false,

    data: formData,

    success: function (json) {

    ShowUpFiles(guid, div_files); //完成后更新已上传的文件列表

    showTips("上传完毕!"); //提示完成

    },

    error: function (xhr, status, error) {

    $.messager.alert("提示", "操作失败"); //xhr.responseText

    }

    });

    以上就是使用EasyUI的FileBox控件进行处理的前端界面部分。

    2、文件上传的后端代码处理

    前面小节介绍了控件前端的使用,包括HTML代码的定义和JS的初始化,以及使用AJax异步方式上传文件并展示出来等操作。

    文件的上传成功,其实也是需要后端的接口处理,需要对文件进行存储,和数据库信息的更新等操作。

    前面我们通过AJax操作,在前端通过JS的方式传输FormData的内容。

    $.ajax({

    url: '/FileUpload/Upload',

    type: 'POST',

    processData: false,

    contentType: false,

    data: formData,

    success: function (json) {

    //转义JSON为对象

    //var data = $.parseJSON(json);

    ShowUpFiles(guid, div_files); //完成后更新已上传的文件列表

    showTips("上传完毕!"); //提示完成

    },

    error: function (xhr, status, error) {

    $.messager.alert("提示", "操作失败"); //xhr.responseText

    }

    });

    其中/FileUpload/Upload就是处理的路径地址,我们来看看MVC里面的FileUploadController对应方法Upload即可。

    先来看看定义和主要处理文件的部分内容。

    b455cf9d8646

    image

    我们通过HttpContext.Request.Files 获得多个文件的集合,并进行处理即可。

    文件的处理,我们先读取文件内容到对象里面,然后使用了业务类进行统一的存储文件和数据库信息即可。

    b455cf9d8646

    image

    文件上传成功后,我们返回对应的地址给前端使用(如果需要的话),完整的上传处理文件的后端代码如下所示。

    ///

    /// 多文件上传处理

    ///

    /// 附件组GUID

    /// 指定的上传目录

    ///

    [AcceptVerbs(HttpVerbs.Post)]

    public ActionResult Upload(string guid, string folder)

    {

    //如果需要修改字段显示,则参考下面代码处理

    dynamic obj = new ExpandoObject();

    List urls = new List();

    var result = new CommonResult();

    HttpFileCollectionBase files = HttpContext.Request.Files;

    if (files != null)

    {

    int i = 0;

    foreach (string key in files.Keys)

    {

    try

    {

    #region MyRegion

    HttpPostedFileBase fileData = files[i++];

    if (fileData != null)

    {

    HttpContext.Request.ContentEncoding = Encoding.GetEncoding("UTF-8");

    HttpContext.Response.ContentEncoding = Encoding.GetEncoding("UTF-8");

    HttpContext.Response.Charset = "UTF-8";

    string fileName = Path.GetFileName(fileData.FileName); //原始文件名称

    string fileExtension = Path.GetExtension(fileName); //文件扩展名

    FileUploadInfo info = new FileUploadInfo();

    info.FileData = ReadFileBytes(fileData);

    if (info.FileData != null)

    {

    info.FileSize = info.FileData.Length;

    }

    info.Category = folder;

    info.FileName = fileName;

    info.FileExtend = fileExtension;

    info.AttachmentGUID = guid;

    info.AddTime = DateTime.Now;

    info.Editor = CurrentUser.Name;//登录人

    //info.Owner_ID = OwerId;//所属主表记录ID

    result = BLLFactory.Instance.Upload(info);

    if (!result.Success)

    {

    LogTextHelper.Error("上传文件失败:" + result.ErrorMessage);

    }

    else

    {

    //返回具体路径地址

    string serverRealPath = info.BasePath.UriCombine(info.SavePath);

    if (!Path.IsPathRooted(info.BasePath) &&

    !info.BasePath.StartsWith("http://") &&

    !info.BasePath.StartsWith("https://"))

    {

    //如果是相对目录,加上当前程序的目录才能定位文件地址

    var url = HttpContext.Request.Url;

    var baseurl = url.AbsoluteUri.Replace(url.PathAndQuery, "");

    serverRealPath = baseurl.UriCombine(serverRealPath).Replace('\\', '/');

    }

    urls.Add(serverRealPath);

    }

    }

    #endregion

    }

    catch (Exception ex)

    {

    result.ErrorMessage = ex.Message;

    LogTextHelper.Error(ex);

    }

    }

    obj.urls = urls;

    }

    else

    {

    result.ErrorMessage = "fileData对象为空";

    }

    var newResult = new { Success = result.Success, ErrorMessage = result.ErrorMessage, urls = urls };

    return ToJsonContent(newResult);

    }

    以上就是使用EasyUI的控件FileBox的前端处理和后端C#代码,从而实现了文件的AJax处理操作,实现较好的体验和功能实现。

    完整代码都已全部贴出,方便供参考学习。

    展开全文
  • easyUI文件上传

    千次下载 热门讨论 2013-07-10 20:30:44
    基于easyui上传 支持大型文件 多文件上传 希望用到的朋友 不要忘记评价
  • 我在较早之前的随笔《基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用》Web框架介绍中介绍了基于Uploadify的文件上传操作,免费版本用的是Jquery+Flash实现文件的上传处理,HTML5收费版本的没有...

    我在较早之前的随笔《基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用》Web框架介绍中介绍了基于Uploadify的文件上传操作,免费版本用的是Jquery+Flash实现文件的上传处理,HTML5收费版本的没有试过。随着Flash逐渐退出整个环境,很多浏览器都可能不再支持Flash的了,因此在更新原有EasyUI整个框架的时候,我们对框架全面进行了完善,包括替换了这个Uploadify的文件上传模块,使用EasyUI内置的FileBox控件,结合Jquery的Ajax操作,我们就可以实现了单文件或者多文件的上传操作了。本篇随笔就主要基于这个主题,介绍基于FileBox控件实现文件上传处理,包括前端页面代码和后端的C#处理代码的操作。

    1、FileBox控件的使用

    FileBox控件原理上是一个TextBox控件和隐藏的一个File控件,因此对于TextBox控件的变化时间onchange依旧可以使用,而由于其隐藏了File控件,那么需要根据DOM规则获取其下面的File控件,从而可以获得文件列表进行Ajax的上传操作,同时由于File文件是一个特殊的内容,我们在上传的时候,使用了JS的FormData对象容器来进行承载文件信息和其他信息,从而能够顺利把文件及其他内容信息一并通过AJax调用,上传到后台去处理。

    按照官方的示例,其实就是定义一个HTML元素,并通过脚本方式初始化对应的样式和事件即可,如下所示。

    //初始化脚本

    $('#fb').filebox({

    buttonText: '选择文件',

    buttonAlign: 'left'

    })

    这样就可以了。

    我们来看看我的实际案例,一般需要上传附件的地方,包括导入Excel文件的记录,或者上传文件作为记录的附件,前者一般是单文件的方式,一次导入一个Excel文件,并加载Excel进行展示,如下所示。

    b455cf9d8646

    image

    文件控件的部分代码如下所示

    Excel导入操作

    和前面Demo的定义类似,这里只是声明了一个FileBox控件,主要还是通过JS代码来进行初始化,和相关的控制。

    $(function () {

    //添加对话框,上传控件初始化

    $('#file_upload').filebox({

    buttonText: '选择文件', //按钮文本

    buttonAlign: 'right', //按钮对齐

    //multiple: true, //是否多文件方式

    //accept: "image/gif,image/bmp,image/jpeg,image/jpg,image/png", //指定文件类型

    onChange: function (e) {

    UploadFile(this, "file_upload", "AttachGUID", "div_files");//上传处理

    }

    });

    });

    通过JS的控制,就可以较好的呈现文件上传的控件了,比不用EasyUI的样式好看很多。

    b455cf9d8646

    image

    通过onchange的控制,可以对文件操作及时进行响应,如我这里选择文件后,马上进行上传,并进行数据的读取和显示在Datagrid里面。

    文件上传的JS逻辑代码如下所示,全部贴出来供参考。

    //上传文件操作

    function UploadFile(_obj, file_ctrlname, guid_ctrlname, div_files) {

    var value = $("#" + file_ctrlname).filebox('getValue');

    var files = $("#" + file_ctrlname).next().find('input[type=file]')[0].files;

    //console.log(files);

    //传入this参数,也可以用这个获取文件

    //var files = $(_obj).context.ownerDocument.activeElement.files;

    //console.log(files);

    var guid = $("#" + guid_ctrlname).val();

    if (value && files[0]) {

    //构建一个FormData存储复杂对象

    var formData = new FormData();

    formData.append("folder", '数据导入文件');

    formData.append("guid", guid);

    formData.append('Filedata', files[0]);//默认的文件数据名为“Filedata”

    $.ajax({

    url: '/FileUpload/Upload', //单文件上传

    type: 'POST',

    processData: false,

    contentType: false,

    data: formData,

    success: function (json) {

    //转义JSON为对象

    var data = $.parseJSON(json);

    //提示用户Excel格式是否正常,如果正常加载数据

    ShowUpFiles(guid, div_files);

    $.ajax({

    url: '/BillDetail_Cust/CheckExcelColumns?guid=' + guid,

    type: 'get',

    dataType:'json',

    success: function (data) {

    if (data.Success) {

    InitGrid(); //重新刷新表格数据

    showTips("文件已上传,数据加载完毕!");

    }

    else {

    showTips("上传的Excel文件检查不通过。请根据页面右上角的Excel模板格式进行数据录入。");

    }

    }

    });

    },

    error: function (xhr, status, error) {

    $.messager.alert("提示", "操作失败"); //xhr.responseText

    }

    });

    }

    }

    我们这里使用了FormData来存储文件复杂对象。

    var formData = new FormData();

    通过查询控件的子DOM对象,我们获得File控件对象,并获取控件里面的Files属性。

    var files = $("#" + file_ctrlname).next().find('input[type=file]')[0].files;

    文件上传后,我们在文件框下面显示已经上传的文件列表,如下代码所示。

    ShowUpFiles(guid, div_files);

    文件上传到服务器后,我们通过接口获取对应的Excel文件,并转换为JSON列表返回,供页面绑定数据展示。

    InitGrid(); //重新刷新表格数据

    上传文件展示列表信息,整体界面效果如下所示。

    b455cf9d8646

    image

    单击删除,弹出确认删除对话框后移除文件即可。

    b455cf9d8646

    image

    上面通过限定,使用了一个文件,以及可以指定上传文件的格式等,如果我们使用多文件上传,客户端只需要设置Multiple为True即可,后端也不需要调整接口 ,使用同一个接口进行处理即可。

    多文件的上传场景,一般是某个记录需要上传文件的情况下,在录入或者编辑界面提供文件上传处理,如下所示。

    b455cf9d8646

    image

    我们这里可以选择多个文件进行一并上传,初始化fileBox控件的时候,只需要指定multiple为true即可。

    //添加对话框,上传控件初始化

    $('#file_upload').filebox({

    buttonText: '选择文件', //按钮文本

    buttonAlign: 'right', //按钮对齐

    multiple: true,

    //accept: "image/gif,image/bmp,image/jpeg,image/jpg,image/png", //指定文件类型

    onChange: function (e) {

    UploadFile(this, "file_upload", "Attachment_GUID", "div_files");//上传处理

    }

    });

    文件的上传和前面操作类似,只不过,我们这次添加了多个文件。

    //构建一个FormData存储复杂对象

    var formData = new FormData();

    formData.append("folder", '政策法规');

    formData.append("guid", guid);

    for (var i = 0; i < files.length; i++) {

    formData.append('Filedata', files[i]);//注意:默认的文件数据名为“Filedata”

    }

    最后也是统一通过ajax进行条用处理

    $.ajax({

    url: '/FileUpload/Upload',

    type: 'POST',

    processData: false,

    contentType: false,

    data: formData,

    success: function (json) {

    ShowUpFiles(guid, div_files); //完成后更新已上传的文件列表

    showTips("上传完毕!"); //提示完成

    },

    error: function (xhr, status, error) {

    $.messager.alert("提示", "操作失败"); //xhr.responseText

    }

    });

    以上就是使用EasyUI的FileBox控件进行处理的前端界面部分。

    2、文件上传的后端代码处理

    前面小节介绍了控件前端的使用,包括HTML代码的定义和JS的初始化,以及使用AJax异步方式上传文件并展示出来等操作。

    文件的上传成功,其实也是需要后端的接口处理,需要对文件进行存储,和数据库信息的更新等操作。

    前面我们通过AJax操作,在前端通过JS的方式传输FormData的内容。

    $.ajax({

    url: '/FileUpload/Upload',

    type: 'POST',

    processData: false,

    contentType: false,

    data: formData,

    success: function (json) {

    //转义JSON为对象

    //var data = $.parseJSON(json);

    ShowUpFiles(guid, div_files); //完成后更新已上传的文件列表

    showTips("上传完毕!"); //提示完成

    },

    error: function (xhr, status, error) {

    $.messager.alert("提示", "操作失败"); //xhr.responseText

    }

    });

    其中/FileUpload/Upload就是处理的路径地址,我们来看看MVC里面的FileUploadController对应方法Upload即可。

    先来看看定义和主要处理文件的部分内容。

    b455cf9d8646

    image

    我们通过HttpContext.Request.Files 获得多个文件的集合,并进行处理即可。

    文件的处理,我们先读取文件内容到对象里面,然后使用了业务类进行统一的存储文件和数据库信息即可。

    b455cf9d8646

    image

    文件上传成功后,我们返回对应的地址给前端使用(如果需要的话),完整的上传处理文件的后端代码如下所示。

    ///

    /// 多文件上传处理

    ///

    /// 附件组GUID

    /// 指定的上传目录

    ///

    [AcceptVerbs(HttpVerbs.Post)]

    public ActionResult Upload(string guid, string folder)

    {

    //如果需要修改字段显示,则参考下面代码处理

    dynamic obj = new ExpandoObject();

    List urls = new List();

    var result = new CommonResult();

    HttpFileCollectionBase files = HttpContext.Request.Files;

    if (files != null)

    {

    int i = 0;

    foreach (string key in files.Keys)

    {

    try

    {

    #region MyRegion

    HttpPostedFileBase fileData = files[i++];

    if (fileData != null)

    {

    HttpContext.Request.ContentEncoding = Encoding.GetEncoding("UTF-8");

    HttpContext.Response.ContentEncoding = Encoding.GetEncoding("UTF-8");

    HttpContext.Response.Charset = "UTF-8";

    string fileName = Path.GetFileName(fileData.FileName); //原始文件名称

    string fileExtension = Path.GetExtension(fileName); //文件扩展名

    FileUploadInfo info = new FileUploadInfo();

    info.FileData = ReadFileBytes(fileData);

    if (info.FileData != null)

    {

    info.FileSize = info.FileData.Length;

    }

    info.Category = folder;

    info.FileName = fileName;

    info.FileExtend = fileExtension;

    info.AttachmentGUID = guid;

    info.AddTime = DateTime.Now;

    info.Editor = CurrentUser.Name;//登录人

    //info.Owner_ID = OwerId;//所属主表记录ID

    result = BLLFactory.Instance.Upload(info);

    if (!result.Success)

    {

    LogTextHelper.Error("上传文件失败:" + result.ErrorMessage);

    }

    else

    {

    //返回具体路径地址

    string serverRealPath = info.BasePath.UriCombine(info.SavePath);

    if (!Path.IsPathRooted(info.BasePath) &&

    !info.BasePath.StartsWith("http://") &&

    !info.BasePath.StartsWith("https://"))

    {

    //如果是相对目录,加上当前程序的目录才能定位文件地址

    var url = HttpContext.Request.Url;

    var baseurl = url.AbsoluteUri.Replace(url.PathAndQuery, "");

    serverRealPath = baseurl.UriCombine(serverRealPath).Replace('\\', '/');

    }

    urls.Add(serverRealPath);

    }

    }

    #endregion

    }

    catch (Exception ex)

    {

    result.ErrorMessage = ex.Message;

    LogTextHelper.Error(ex);

    }

    }

    obj.urls = urls;

    }

    else

    {

    result.ErrorMessage = "fileData对象为空";

    }

    var newResult = new { Success = result.Success, ErrorMessage = result.ErrorMessage, urls = urls };

    return ToJsonContent(newResult);

    }

    以上就是使用EasyUI的控件FileBox的前端处理和后端C#代码,从而实现了文件的AJax处理操作,实现较好的体验和功能实现。

    完整代码都已全部贴出,方便供参考学习。

    展开全文
  • Uploadify 是 JQuery 一个著名的上传插件,利用 Flash 技术,Uploadify 越过浏览器的限制,控制了整个上传的处理过程,实现了客户端无刷新的文件上传,这样就实现了在客户端的上传进度控制,所以,你首先要确定...
  • 在用easyUI进行WEB应用开发时,往往要同时上传一些参数,使之可同时完成必要的功能处理,但easyUI默认不提供参数上传,为此进行了扩展。此扩展应用,在SSH框架中通过检验。
  • easyUI 上传多个附件并可以删除

    千次阅读 2018-07-05 10:17:01
    //下载地址 var picUrl = scheme+'://'+host+':'+port+'/'+preview_path+'?file_app_id='+file_app_id+'&file_serial_no='+file_serial_no;//预览地址 $('#info_box').append( "<tr id='"+file_serial_no+"'>" +...
  • SpringBoot集成POI实现文件的上传下载等功能 pom.xml文件配置 <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</artifactId> <version>RELEASE<...
  • plupload 结合easyui 上传文件
  • 页面上的附件上传功能,既想上传附件,又想上传之后能下载,保存之后重新访问页面仍然还能显示。 先贴代码如下(各位凑合着└(^o^)┘): 注册自定义组件attachmentbox: $.parser.plugins.push("...
  • /** * Created by Hexu on 2018/8/23. * 批量文件上传 */ ; ( function($) { function init( target, opts ) { var tar = $(target); var height = opts.fit ? tar.parent().height() : opts.hei...
  • 本篇博客主要采用了springboot+easyui框架,实现用户在前台进行上传文件。 整个过程分为以下两步: 1 前台定义文件框进行文件的选取。 2 用户通过对选取文件进行上传。 前台页面 1 定义文件上传按钮 a ...
  • easyui的filebox组件实现多文件上传

    千次阅读 2020-03-17 10:06:39
    //循环遍历多个文件,并设置文件夹名称,然后工具类上传,最后保存到附件表中 public void Upload(List<MultipartFile> multipartFiles,String id) throws IOException { for(MultipartFile multipartFile : ...
  • 演示了包括:权限控制、超大附件文件上传EasyUI基本组件使用等等功能,具体请自行看本示例演示功能 SSH框架环境需求:JAVA环境:JDK7+;数据库环境:oracle10g+/sqlserver2000+/mysql5+;WEB容器环境:jetty6+/...
  • 2、easyui.tabs的add方法当useiframe=true时,增加遮罩控制。 3、toolbar增加url属性,可以通过请求后台数据构建。 4、增加mask(遮罩)扩展。 2013-8-26 更新 1、tree增加支持类标准数据格式加载,具体看demo或...
  • jsp中用form表单上传图片可以,但是在easyUI datagrid中的editor 用filebox上传图片就不行,开始以为是easyUI id问题 上传图片用的一个jquery插件:ajaxFileUpload 这里需要一个fileElementId 是input标签的id,...
  • 有图有真相这是少爵利用空余时间写的 easyui + swfupload 多文件上传的页面效果.是个半成品 .任然有些问题 .有些文件上传成功却 0%. 有些文件上传错误 却 100%当文件无后缀时. 上传却是不行.停止功能暂时不能用.取消...
  • easyui视频讲解以及代码,适合刚开始学习的同学用,视频讲解的很细,还附带代码。有需要的朋友自己下载观看
  • jQuery EasyUI/TopJUI上传多个附件并可以进行删除操作 jQuery EasyUI/TopJUI上传多个附件并可以进行删除操作 html <table data-toggle="topjui-datagrid" data-options="id:'productDg', ...
  •  使用FormData方式提交上传附件与相关数据  同时实现jQuery-form.js附件上传功能  同时实现标准的html input file提交  同时实现easyuiFileBox与标准的ajax附件上传功能 有数据库,下载直接能运行
  • easyUI上传的表单提交

    千次阅读 2017-08-28 11:30:47
    当选择不同播放形式 radio时,出现不同的上传方式的js $(function() { $(":radio") .click( function() { if (this.click) { if ($(this).attr("id") == "radioLB") { ...
  • easyUi 图片上传

    千次阅读 2016-05-11 16:25:47
    覆盖错误提示和上传列表 onSelectError : function (file,errorCode,errorMsg) { // 上传超出限制 switch (errorCode) { case - 110 : $ . messager . alert ( ' 警告 ' , ' 超出图片限制 !' , '...
  • easyui 下载 服务器文件的实现

    千次阅读 2018-09-13 10:16:35
    &lt;a&gt;&lt;/a&gt;标签如果指定一个文件,并且文件浏览器不能打开,浏览器将执行下载的功能,如果能打开,就会在浏览器打开 而我要实现的是服务端的下载,在WebContext下创建files...easyui-...
  • 在使用easyUI做前端样式展示时,遇到了文件上传的问题,而且是在弹出层中提交表单,想做到不刷新页面,所以选择了使用ajaxFileUpload插件。提交表单时一直发现后台接收不到文件,后检查发现,原来是文件的id不对。...
  • /*FileDownloadUtils.downloadJSON("{success:false, msg:'上传文件不能大于" + maxSize +",请修改后重新上传!'}", getResponse());*/ msg = "上传文件不能大于" + maxSize +",请修改后重新上传!"; return ...
  • 不同于上次文件上传,本次上传在js中提交,且上传后重命名文件并存名与数据库 HTML代码 <div> <form id="form" name="form" method="post" enctype="multipart/form-data" > <div class=...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 753
精华内容 301
热门标签
关键字:

easyui附件上传下载