1.样式

2.js

3.后台处理

4.效果图

一.样式

<style>
.divUpload {
position: relative;
} .divUploadFirst {
width: 100px;
height: 36px;
background: #666666;
color: #fff;
text-align: center;
line-height: 36px;
} .file_input {
width: 200px; /*因为file-input在部分浏览器中会自带一个输入框,需要双击才可以点击上传,放大后将其定位到div外面就好啦*/
height: 36px;
position: absolute;
left: -100px;
top: 0;
z-index: 1;
-moz-opacity: 0;
-ms-opacity: 0;
-webkit-opacity: 0;
opacity: 0; /*css属性——opcity不透明度,取值0-1*/
filter: alpha(opacity=0); /*兼容IE8及以下--filter属性是IE特有的,它还有很多其它滤镜效果,而filter: alpha(opacity=0); 兼容IE8及以下的IE浏览器(如果你的电脑IE是8以下的版本,使用某些效果是可能会有一个允许ActiveX的提示,注意点一下就ok啦)*/
cursor: pointer;
}
</style>
  <div class="divUpload">
<div class="divUploadFirst" style="width:82px;height:34px;border-radius:14px;">上传协议</div>
<input type="file" class="file_input" id="txtUpload" onchange="upload()" accept="image/*" multiple >
</div>
  <div class="form-group" style="clear:both">
<div id="images">
</div>
</div>

二 JS

 //上传协议
function upload() {
var uploaderUrl = '@Url.Content("~/PetCase/Upload")';
var files = document.getElementById("txtUpload").files;
var fd = new FormData();
for (var i = ; i < files.length; i++) {
fd.append("file["+i+"]", files[i]);
}
fd.append('caseNum', caseNum);
$.ajax({
url:uploaderUrl,
type :"post",
data:fd,
dataType: "json",
cache: false,//上传文件无需缓存
processData: false,//用于对data参数进行序列化处理 这里必须false
contentType: false,
success:function(data){
if(data.length >){
for (var i = ; i < data.length; i++) {
imgPath.push(data[i].imgpath); var html = '<div style="width:200px;float:left;margin-left: 5px;cursor:pointer"> <div class="sh" ></div><div class="img1"><img src="' + data[i].imgpath + '" style="width:200px;" /></div></div>'
$("#images").append(html);
}
addPichtml();
}
},
error:function(){
layer.msg('上传发生错误.');
}
});
}
function addPichtml() {
$(".sh").bind('click', function () {
var $img = $(this).parent().find("img");
var ipath = $img.attr("src");
for (var i = ; i < imgPath.length; i++) {
if (imgPath[i] == ipath) {
imgPath.splice(i, );
$(this).parent().remove();
DelImgPath(ipath);
}
}
}) $(".img1").bind('click', function () {
var $img = $(this).parent().find("img");
var ipath = $img.attr("src");
for (var i = ; i < imgPath.length; i++) {
if (imgPath[i] == ipath) {
layer.open({
type: ,
title: "协议",
content: '<div><img src="' + ipath + '" /></div>',
maxmin: true,
area: [ + "px", + "px"]
})
}
}
}) }

三 后台处理

[HttpPost]
public ActionResult Upload(HttpPostedFileBase Filedata, string caseNum)
{
// 没有文件上传,直接返回
//if (Filedata == null || string.IsNullOrEmpty(Filedata.FileName) || Filedata.ContentLength == 0)
//{
// return HttpNotFound();
//} #region 另外一种方式上传
if (Request.Files == null || Request.Files.Count == )
{
return HttpNotFound();
} List<object> result = new List<object>();
for (int i = ; i < Request.Files.Count; i++)
{
Filedata = Request.Files[i];
#endregion string FileEextension = Path.GetExtension(Filedata.FileName);
string uploadYear = DateTime.Now.Year.ToString();
string uploadDate = DateTime.Now.Date.ToString("MMdd"); // string dirpath = System.Configuration.ConfigurationManager.AppSettings["WebTransferHospitalImgDirPath"];
string filepath = System.Configuration.ConfigurationManager.AppSettings["UploadProtocolPath"];
string strGUID = System.Guid.NewGuid().ToString();
strGUID = DateTime.Now.ToString("yyyMMddHHmmssfffffff")+Guid.NewGuid();//上传的图片按上传时间的先后来命名,显示再按命名来排序 string fullFileName = Server.MapPath("~/UploadFile/UploadProtocol") + "/" + uploadYear + "/" + uploadDate + "/" + caseNum + "/" + strGUID + FileEextension;
string webPath = filepath + "/" + uploadYear + "/" + uploadDate + "/" + caseNum + "/" + strGUID + FileEextension; //创建文件夹,保存文件
string path = Path.GetDirectoryName(fullFileName);
if (!Directory.Exists(path))
{
Directory.CreateDirectory(path);
} Filedata.SaveAs(fullFileName); var data = new { imgpath = webPath };
result.Add(data);
} return Json(result, JsonRequestBehavior.AllowGet);
}

四 效果图

上传文件,不依赖 Jquery flash 插件,用到HTML5 input 新属性实现过滤文件格式、同时上传多个文件的更多相关文章

  1. web 表单方式上传文件方法(不用flash插件)

    原理:使用表单的input type="file"标签,通过ajax提交表单请求,后台获取请求中的文件信息,进行文件保存操作 由于我测试用的做了一个上传文件和上传图片方法,所以我有 ...

  2. HTML5 input date属性引起的探索——My97DatePicker(日期选择插件)

    不得不说H5的input date属性真的好用,之前我写的http://www.cnblogs.com/tu-0718/p/6729274.html这篇博客里面也有提到,不过虽然移动端对H5的支持还是 ...

  3. 使用jQuery.form插件,实现完美的表单异步提交

    传送门:异步编程系列目录…… 时间真快,转眼一个月快结束了,一个月没写博客了!手开始生了,怎么开始呢…… 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 月份的尾巴,今天的主 ...

  4. 分享一款超棒的jQuery旋钮插件 - jQuery knob

    转自:http://www.cnblogs.com/gbin1/archive/2012/05/08/2489908.html 在线演示  本地下载 如果你也在寻找一款生成漂亮旋钮(knob)的jQu ...

  5. jquery uploadify插件多文件上传

    1.jquery uploadify 下载:http://www.uploadify.com/ 2.安装:解压后拷贝的工程目录下面,如:WebRoot/uploaddify 3.配置项说明: uplo ...

  6. jquery 实现ajax 上传文件的功能(使用插件 ajaxfileupload)

    js文件的下载地址 : http://files.cnblogs.com/wangqc/ajaxfileupload.js 页面代码: <html>    <!-- 引入相关的js文 ...

  7. 使用jQuery.FileUpload插件和服Backload组件自定义上传文件夹

    在零配置情况下,文件的上传文件夹是根目录下的Files文件夹,如何自定义文件的上传文件夹呢? □ 在web.config中配置 1: <configuration> 2: <conf ...

  8. 利用Jquery使用HTML5的FormData属性实现对文件的上传

    1.利用Jquery使用HTML5的FormData属性实现对文件的上传 在HTML5以前我们如果需要实现文件上传服务器等功能的时候,有时候我们不得不依赖于FLASH去实现,而在HTML5到来之后,我 ...

  9. Uploadify & jQuery.imgAreaSelect 插件实现图片上传裁剪

    在网站中需要一个图片上传裁剪的功能,借鉴这篇文章 Ajax+PHP+jQuery图片截图上传 的指点,找到了jquery.imgAreaSelect这个不错插件,能对图片进行自定义区域选择并给出坐标, ...

随机推荐

  1. One Person Game(zoj3593+扩展欧几里德)

    One Person Game Time Limit:2000MS Memory Limit:65536KB 64bit IO Format:%lld & %llu Submit Status ...

  2. Placement of class definition and prototype

    When I create a function, I can put the code for it after main if I put the prototype above main. Fo ...

  3. NIO学习笔记二

    Java NIO的通道channel 既可以从通道中读取数据,又可以写数据到通道.通道可以异步地读写.通道中的数据总是要先读到一个Buffer(缓冲区),或者总是要从一个Buffer(缓冲区)中写入. ...

  4. jsp使用servlet实现用户登录 及动态验证码

    在进行表单设计中,验证码的增加恰恰可以实现是否为“人为”操作,增加验证码可以防止网站数据库信息的冗杂等... 现在,我将讲述通过servlet实现验证码: 验证码作为一个图片,在页面中为“画”出来的, ...

  5. linux下怎么进入本机mysql

    sudo /etc/init.d/mysql startmysql -u xxxx -p*****mysql >_

  6. ES6学习之关键字

    前言:什么是ES6?ECMAScript 6(简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.其中相比较于ES5新增了诸多的特性,并且ES6可转换为ES5的语法.- ...

  7. csharp:FTP Client Library using FtpWebRequest or Sockets

    https://netftp.codeplex.com/SourceControl/latest http://ftplib.codeplex.com/ https://www.codeproject ...

  8. python之编码和解码

    编码: 1. ascii. 有: 数字, 字母, 特殊字符. 8bit 1byte 128 最前面是0 2. gbk. 包含: ascii, 中文(主要), 日文, 韩文, 繁体文字. 16bit, ...

  9. 安全测试 一次关于WEB的URL安全测试

    一次关于WEB的URL安全测试 by:授客 QQ:1033553122     测试思路: 时间精力问题,对web安全这块也没咋深入研究,但因为某个小插曲,公司要求先做个简单的安全测试,主要是针对UR ...

  10. loadrunner 场景设计-IP Spoofer-多ip负载生成器(Windows平台)

    IP Spoofer-多ip负载生成器 by:授客 QQ:1033553122 1  适用协议 LoadRunner的多ip功能允许运行在单一负载生成器上的Vuser可以通过多ip被识别.服务器和路由 ...