效果图:

代码:

<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="width: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;
}
}

  

easyui上传文件的更多相关文章

  1. easyui 上传文件代码

    using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.IO;usi ...

  2. MVC项目使用easyui的filebox控件上传文件

    开发环境:WIN10+IE11,浏览器请使用IE10或以上版本 开发技术框架MVC4+JQuery Easyui+knockoutjs 效果为弹出小窗体,如下图 1.前端cshtml文件代码(只包含文 ...

  3. EasyUI 关于IE使用window组件上传文件

    有时候IE会对使用window组件上传文件(第二次)不生效,解决方案是: 将该window每次打开的时候,使用: $('#adUploadWindow').window('refresh', 'pan ...

  4. .net MVC借助Iframe实现无刷新上传文件

    html: <div id="uploadwindow" style="display: none;"> <form action=" ...

  5. MVC ajax 上传文件

    废话不多说,上代码: 用到的js文件: jquery.min.js jquery.easyui.min.js <input id="fileurl" onclick=&quo ...

  6. easy ui 异步上传文件,跨域

    easy ui 跨域上传文件,代码如下: 1.html代码:(这段代码是个win窗体,我在点击上传图片按钮然后弹出一个上传图片的窗体,选择图片再进行上传,这样在form提交时,提交的参数会少一点.) ...

  7. mvc4 强大的导出和不需要上传文件的批量导入EXCEL--SNF快速开发平台3.1

    数据的导入导出,在很多系统里面都比较常见,这个导入导出的操作,在Winform里面比较容易实现,但在Web上我们应该如何实现呢?本文主要介绍利用MVC4+EasyUI的特点,并结合文件上传控件,实现文 ...

  8. c#+js 使用formdata上传文件

    如果不是使用form表单submit的形式,我们可以手动通过formdata传值(针对文件上传等) 比如: <html> <head> <meta name=" ...

  9. JQUERY AJAX无刷新异步上传文件

    AJAX无刷新上传文件并显示 http://blog.csdn.net/gao3705512/article/details/9330637?utm_source=tuicool jQuery For ...

随机推荐

  1. 深入单例模式 - Java实现

    单例模式可能是代码最少的模式了,但是少不一定意味着简单,想要用好.用对单例模式,还真得费一番脑筋.本文对Java中常见的单例模式写法做了一个总结,如有错漏之处,恳请读者指正. 饿汉法 顾名思义,饿汉法 ...

  2. tomcat做成服务

    如果Tomcat是安装版的话服务就已经有了,那么解压版的tomcat(我就经常这么做)没服务怎么办了?     手动把tomcat做成服务方法:      1.环境变量配置jdk      2.运行c ...

  3. Android设计模式系列(1)--SDK源码之组合模式

    Android中对组合模式的应用,可谓是泛滥成粥,随处可见,那就是View和ViewGroup类的使用.在android UI设计,几乎所有的widget和布局类都依靠这两个类.组合模式,Compos ...

  4. iOS 获得通讯录中联系人的所有属性--b

    ABAddressBookRef addressBook = ABAddressBookCreate(); CFArrayRef results = ABAddressBookCopyArrayOfA ...

  5. C#:文件操作(待补充)

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.I ...

  6. mydate97时间插件集成jquery插件

    1.初始化JS: //把mydate97时间插件集成jquery插件 (function ($) { $.fn.mydatePicker = function (options) { return t ...

  7. Atitit. 构造ast 语法树的总结attilax oao

    Atitit. 构造ast 语法树的总结attilax oao 1. 能那更加有意义的名字来命名ast节点... 1 2. 如何命名表达式名称..使用实际对象名称,而不是操作符号表达式更好 1 2.1 ...

  8. 异步FIFO的FPGA实现

    本文大部分内容来自Clifford E. Cummings的<Simulation and Synthesis Techniques for Asynchronous FIFO Design&g ...

  9. homebrew 无法安装,提示不能在根目录下使用

    sudo chown -R $(whoami) /usr/local 把/use/local的owner換成自己,就有write權限了 whoami就是一個命令,會echo當前登錄用戶的名字.當然你知 ...

  10. 记一次有趣的 Netty 源码问题

    背景 起因是一个朋友问我的一个关于 ServerBootstrap 启动的问题. 相关 issue 他的问题我复述一下: ServerBootstrap 的绑定流程如下: ServerBootstra ...