ashx 获取上传的文件_ajax+ashx 完美实现input file上传文件

1、input file 样式不能满足需求

IE8效果图：

  Firefox效果图：

 Chrome效果图：  

2、input file上传按钮美化

css：

.file{

position: relative;

background-color: #b32b1b;

border: 1px solid #ddd;

width: 68px;

height: 25px;

display: inline-block;

text-decoration: none;

text-indent:;

line-height: 25px;

font-size: 14px;

color: #fff;

margin: 0 auto;

cursor: pointer;

text-align: center;

border: none;

border-radius: 3px;

}

.file input{

position: absolute;

top:;

left: -2px;

opacity:;

width: 10px;

}

html：

选择文件：

浏览

美化后的效果图：

3、ajax+ashx实现上传功能

js:

$(function () {

//选择文件

$(".file").on("change", "input[type='file']", function () {

var filePath = $(this).val();

//设置上传文件类型

if (filePath.indexOf("xls") != -1 || filePath.indexOf("xlsx") != -1) {

//上传文件

$.ajaxFileUpload({

url: 'ASHX/FileHandler.ashx',

secureuri: false,

fileElementId: 'btnfile',

dataType: 'json',

success: function (data, status) {

//获取上传文件路径

$("#txt_filePath").val(data.filenewname);

alert("文件上传成功！");

},

error: function (data, status, e) {

alert(e);

}

});

} else {

alert("请选择正确的文件格式！");

//清空上传路径

$("#txt_filePath").val("");

return false;

}

});

})

FileHandler.ashx

public class FileHandler : IHttpHandler {

public void ProcessRequest (HttpContext context) {

context.Response.ContentType = "text/plain";

string msg = string.Empty;

string error = string.Empty;

string result = string.Empty;

string filePath = string.Empty;

string fileNewName = string.Empty;

//这里只能用才能有效果,因为服务器控件是HttpInputFile类型

HttpFileCollection files = context.Request.Files;

if (files.Count > )

{

//设置文件名

fileNewName = DateTime.Now.ToString("yyyyMMddHHmmssff") + "_" + System.IO.Path.GetFileName(files[].FileName);

//保存文件

files[].SaveAs(context.Server.MapPath("~/Upload/"+fileNewName));

msg = "文件上传成功！";

result = "{msg:'" + msg + "',filenewname:'" + fileNewName + "'}";

}

else

{

error = "文件上传失败！";

result = "{ error:'" + error + "'}";

}

context.Response.Write(result);

context.Response.End();

}

public bool IsReusable {

get {

return false;

}

}

}

实现一个简单上传功能

input file 上传文件

面试的时候遇到一个问题,要求手写的方式上传文件. 本来觉得很简单,但是结果怎么也成功不了. 前台:

input file上传文件

如何使用input[type='file']来上传文件呢? html: //angular

巧妙利用label标签实现input file上传文件自定义样式

提到上传文件,一般会想到用input file属性来实现,简单便捷,一行代码即可    但input file原生提供的默认样式大多情况下都不符合需求,且在不同浏览器上呈现的样式也不尽相同   我们往 ...

使用input file上传文件中onChange事件只触发一次问题

每次上传文件的时候,都会将当前的文件路径保存至$event.target.value中,当第二次选择文件时,由于两次$event.target.value相同,所以不会触发change事件. 解决方案 ...

input file上传文件扩展名限制

方法一(不推荐使用):用jS获获取扩展名进行验证:

angular input file 上传文件

随机推荐

HTML学习(一)基础篇

这篇文章有人比我总结的好,适用于新手,我就适当的铺垫一下,结尾处会给你们网站,我就不班门弄斧了. 一)HTML结构 1.

标签

Genymotion的安装与eclipse配置教程

第一部分安装Genymotion和VirtualBox虚拟机 1,Genymotion模拟器可以在官网下载,但是下载前需要注册账号,账号注册后登陆,点击Download. 2,选择第一个with Vi ...

封装获取网络信息Linux—API类

封装获取网络信息Linux—API类 封装好的库: #ifndef NETINFORMATION_H #define NETINFORMATION_H #include ...

python获取的信息列表微信公共平台和用户头像

转载注明原文地址:http://blog.csdn.net/btyh17mxy/article/details/25207889 只写模拟登陆的方式获取微信从信息和头像库列表公共平台, - 相关后,功 ...

MySql的虚拟机和Xshell5的连接过程

给大家介绍一下虚拟机和Xshell5连接的基本配置1.安装虚拟机,跟着提示一步一步安装即可,注意添加镜像文件,虚拟机就完成了.2.下载一个Xshell5,安装好之后.要修改虚拟机的网卡状态    1) ...

np.array转换为list，嵌套的python list转成一个一维的python list

np.array转换为list 1 meitan = shuju.iloc[start:end, 1:2] zhengqi = shuju.iloc[start:end,2:3] print(type ...

windows 下安装或者卸载memcache

1.安装到系统服务中: 在doc中:执行此软件 memcached.exe -d install(如果提示错误,要找到cmd.exe用管理员身份打开) 2.卸载: 在doc中:执行此软件 memcac ...

CSS3 之 童年的纸飞机

今天我们来折纸飞机(可以飞出去的那种哦) 基本全用css来实现,只有一小部分的js 首先看一下飞机的构造 灰色区域为可折叠区域 白色区域为机身 三角形由border画出来的再经过各种平移翻转变成上图 ...

nanoPI编译内核的一些record

我用的nanopi型号为 nanopi NEO,本来想拿来跑一跑需要usb串口读数据的golang程序,NEO居然没有该内核驱动的配置. 官方wiki:http://wiki.friendlyarm. ...

Shell脚本- 单条命令循环执行重复工作

关于shell for循环具体详细说明可参考:http://wiki.jikexueyuan.com/project/linux-command/chap34.html example: 分别在com ...