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="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上传文件的更多相关文章
- easyui 上传文件代码
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.IO;usi ...
- MVC项目使用easyui的filebox控件上传文件
开发环境:WIN10+IE11,浏览器请使用IE10或以上版本 开发技术框架MVC4+JQuery Easyui+knockoutjs 效果为弹出小窗体,如下图 1.前端cshtml文件代码(只包含文 ...
- EasyUI 关于IE使用window组件上传文件
有时候IE会对使用window组件上传文件(第二次)不生效,解决方案是: 将该window每次打开的时候,使用: $('#adUploadWindow').window('refresh', 'pan ...
- .net MVC借助Iframe实现无刷新上传文件
html: <div id="uploadwindow" style="display: none;"> <form action=" ...
- MVC ajax 上传文件
废话不多说,上代码: 用到的js文件: jquery.min.js jquery.easyui.min.js <input id="fileurl" onclick=&quo ...
- easy ui 异步上传文件,跨域
easy ui 跨域上传文件,代码如下: 1.html代码:(这段代码是个win窗体,我在点击上传图片按钮然后弹出一个上传图片的窗体,选择图片再进行上传,这样在form提交时,提交的参数会少一点.) ...
- mvc4 强大的导出和不需要上传文件的批量导入EXCEL--SNF快速开发平台3.1
数据的导入导出,在很多系统里面都比较常见,这个导入导出的操作,在Winform里面比较容易实现,但在Web上我们应该如何实现呢?本文主要介绍利用MVC4+EasyUI的特点,并结合文件上传控件,实现文 ...
- c#+js 使用formdata上传文件
如果不是使用form表单submit的形式,我们可以手动通过formdata传值(针对文件上传等) 比如: <html> <head> <meta name=" ...
- JQUERY AJAX无刷新异步上传文件
AJAX无刷新上传文件并显示 http://blog.csdn.net/gao3705512/article/details/9330637?utm_source=tuicool jQuery For ...
随机推荐
- 如何让iOS模拟器也能测试蓝牙4.0程序?
买一个CSR蓝牙4.0 USB适配器,插在Mac上 在终端输入sudo nvram bluetoothHostControllerSwitchBehavior="never" 重启 ...
- IntelliJ IDEA 学习(二):Intellij IDEA 创建Web项目并在Tomcat中部署运行IDEA
一.创建Web项目 1.File -> New Module,进入创建项目窗口 2.选择Java类型,在 Module name 处输入项目名,点击Next 3.勾选 Web Applicat ...
- node定时任务——node-schedule模块使用说明
在实际开发项目中,会遇到很多定时任务的工作.比如:定时导出某些数据.定时发送消息或邮件给用户.定时备份什么类型的文件等等. 一般可以写个定时器,来完成相应的需求,在node.js中自已实现也非常容易, ...
- Spring Cloud(七):使用SVN存储分布式配置中心文件和实现refresh
国内很多公司都使用的svn来做代码的版本控制,我们先介绍以下如何使用svn+Spring Cloud Config来做配置中心. svn版本 同样先示例server端的代码,基本步骤一样. 1.添加依 ...
- Spring Boot中使用Spring-data-jpa
在实际开发过程中,对数据库的操作无非就“增删改查”.就最为普遍的单表操作而言,除了表和字段不同外,语句都是类似的,开发人员需要写大量类似而枯燥的语句来完成业务逻辑. 为了解决这些大量枯燥的数据操作语句 ...
- Rigidbody-ClosestPointOnBounds测试
可见是Collider的Bounds
- 基于Vivado的嵌入式开发 ——PS+PL实践
基于Vivado的嵌入式开发 ——PS走起 硬件平台:ZedBoard 开发工具:Vivado 2014.2 1.规划 废话不多说,依然是流水灯,这次是采用PS+PL实现. 功能依旧简单,目标是为了学 ...
- 【Android】12.6 利用Intent实现记事本功能(NotePad)
分类:C#.Android.VS2015: 创建日期:2016-02-23 一.简介 这个例子演示如何实现一个简单的记事本功能. 该例子提前使用了后面章节将要介绍的SQLLite数据库. 二.示例-c ...
- <LeetCode OJ> 234. Palindrome Linked List
Total Accepted: 40445 Total Submissions: 148124 Difficulty: Easy Given a singly linked list, determi ...
- mysql 主主复制(双主复制)binlog-do-db
[root@DB ~]# grep "binlog-do-db" /etc/my.cnf binlog-do-db = test [root@DB-S ~]# grep " ...