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;
            }
        }
    

      

  • 相关阅读:
    .NET Core 5
    2018.6.5号----TeamViewer12 13 非商用出现商用限制怎么解决
    第:九课:SQL数据库___超级列表框与数据库的组合修改
    第八课:SQL数据库插入数据和更新数据
    第七课:数据库表的创建
    第六课:数据库的基本工具
    第五课: 模拟器的绑定与文本发送应用.exe
    第四课:APK的一些操作
    第三课:模拟器里安装手游APK安装
    第二课: 雷电模拟器的多开和打开
  • 原文地址:https://www.cnblogs.com/liuqiyun/p/7144628.html
Copyright © 2011-2022 走看看