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

    效果图:

    代码:

    <form id="importFileForm" method="post" enctype="multipart/form-data" style="display:">
                <table style="margin:5px;height:70px;">
                    <tr>
                        <td></td>
                        <td width="5px;"></td>
                        <td><input class="easyui-filebox" id="fileImport" data-options="buttonText:'选择',prompt:'请选择文件...'"  name="fileImport" style="260px;">
                        </td>
                        <td><a id="uploadFile" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" href="javascript:void(0)">上传</a></td>
                    </tr>
                    <tr>
                        <td colspan="4">
                            <label id="uploadInfo" />
                        </td>
                    </tr>
                </table>
            </form>
        <script>
            //导入文件
            $("#uploadFile").click(function () {
                var formData = new FormData($("#importFileForm")[0]);
                //调用apicontroller后台action方法,将form数据传递给后台处理。contentType必须设置为false,否则chrome和firefox不兼容
                $.ajax({
                    url: "http://localhost:12745/api/easyuiUpload/PostExcelData",
                    type: 'POST',
                    data: formData,
                    async: false,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function (returnInfo) {
                        //上传成功后将控件内容清空,并显示上传成功信息
                        document.getElementById('fileImport').value = null;
                        document.getElementById('uploadInfo').innerHTML = "<span style='color:Red'>" + returnInfo + "</span>";
                    },
                    error: function (returnInfo) {
                        //上传失败时显示上传失败信息
                        document.getElementById('uploadInfo').innerHTML = "<span style='color:Red'>" + returnInfo + "</span>";
                    }
                });
               
            })
        </script>
    
    后台:
    public class easyuiUploadController : ApiController
        {
            /// <summary>
            /// 将文件上传到指定路径中保存
            /// </summary>
            /// <returns>上传文件结果信息</returns>
            [System.Web.Http.HttpPost]
            
            public string PostExcelData()
            {
                string info = string.Empty;
                try
                {
                    //获取客户端上传的文件集合
                    HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;
                    //判断是否存在文件
                    if (files.Count > 0)
                    {
                        //获取文件集合中的第一个文件(每次只上传一个文件)
                        HttpPostedFile file = files[0];
                        //定义文件存放的目标路径
                        string targetDir = System.Web.HttpContext.Current.Server.MapPath("~/FileUpLoad/Product");
                        //创建目标路径
                        if (!Directory.Exists(targetDir))
                        {
                            Directory.CreateDirectory(targetDir);
                        }
                        //ZFiles.CreateDirectory(targetDir);
                        //组合成文件的完整路径
                        string path = System.IO.Path.Combine(targetDir, System.IO.Path.GetFileName(file.FileName));
                        //保存上传的文件到指定路径中
                        file.SaveAs(path);
                        info = "上传成功";
                    }
                    else
                    {
                        info = "上传失败";
                    }
                }
                catch
                {
                    info = "上传失败";
                }
                return info;
            }
        }
    

      

  • 相关阅读:
    perl 传递对象到模块
    mysql 监控 大批量的插入,删除,和修改
    mysql 监控 大批量的插入,删除,和修改
    【带着canvas去流浪(11)】Three.js入门学习笔记
    当代职场成功学:越懒惰,越躺赢
    Python3 threading的多线程管理中的线程管理与锁
    collections 使用教程
    Spring MVC DispatcherServlet改造为 CSE RestServlet 常见问题汇编
    WAF(NGINX)中502和504的区别
    Lua
  • 原文地址:https://www.cnblogs.com/liuqiyun/p/7144628.html
Copyright © 2011-2022 走看看