效果图:
代码:
<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; } }