今天遇到另外一种上传图片方法

用jquery.fileupload.js

<input type="file" name="file[]" multiple id="fileupload">

一个文件类型的元素

$("#fileupload").fileupload({

datatype:"json",

url: "/File/UploadFiles",
done: function (e, data) { //上传结束的操作

if (data.result[0].result != "OK") //不成功的时候 弹出消息
{
alert(data.result[0].result);
}
else
{
$("#imgshow").attr("src", data.result[0].thumbnail_url); //成功的时候显示图片
}

}

})

上面的url 处理当选择完成图片后进行的上传操作

public string path = "~/Files";

 [HttpPost]
public ActionResult UploadFiles()
{
var r = new List<ViewDataUploadFilesResult>();
foreach (string file in Request.Files)
{
var statuses = new List<ViewDataUploadFilesResult>();
var headers = Request.Headers; if (string.IsNullOrEmpty(headers["X-File-Name"]))
{
UploadWholeFile(Request, statuses);
}
else
{
UploadPartialFile(headers["X-File-Name"], Request, statuses);
} JsonResult result = Json(statuses);
result.ContentType = "text/plain"; return result;
} return Json(r);
}

上面是uploadfiles方法。

ViewDataUploadFilesResult是定义的文件类
  public class ViewDataUploadFilesResult
{
public string name { get; set; }
public int size { get; set; }
public string type { get; set; }
public string url { get; set; }
public string delete_url { get; set; }
public string thumbnail_url { get; set; }
public string delete_type { get; set; } public string result { set; get; }
}

有名字尺寸类型等属性

UploadWholeFile上传整个文件
 private void UploadWholeFile(HttpRequestBase request, List<ViewDataUploadFilesResult> statuses)
{
for (int i = ; i < request.Files.Count; i++)
{
string result = ISValid(request.Files[i], "image");
if (result!= "OK")
{
statuses.Add(new ViewDataUploadFilesResult() { result=result});
}
}
if (statuses.Count > ) return;
for (int i = ; i < request.Files.Count; i++)
{
var file = request.Files[i]; if (!Directory.Exists(StorageRoot))
{
Directory.CreateDirectory(StorageRoot);
}
string fileExt = Path.GetExtension(file.FileName).ToLower();
string newFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo) + fileExt;
var fullPath = Path.Combine(StorageRoot, newFileName); file.SaveAs(fullPath); statuses.Add(new ViewDataUploadFilesResult()
{
result = "OK",
name = newFileName,
size = file.ContentLength,
type = file.ContentType,
url = Path.Combine(path, Path.GetFileName(newFileName)),
delete_url = "/Home/Delete/" + newFileName,
thumbnail_url = @"data:image/png;base64," + EncodeFile(fullPath),
delete_type = "GET",
});
}
}
 private void UploadPartialFile(string fileName, HttpRequestBase request, List<ViewDataUploadFilesResult> statuses)
{
if (request.Files.Count != ) throw new HttpRequestValidationException("Attempt to upload chunked file containing more than one fragment per request");
var file = request.Files[];
string result = ISValid(file, "image");
if (result != "OK")
{
statuses.Add(new ViewDataUploadFilesResult() { result = result });
}
if (statuses.Count > ) return;
var inputStream = file.InputStream;
if (!Directory.Exists(StorageRoot))
{
Directory.CreateDirectory(StorageRoot);
}
string fileExt = Path.GetExtension(file.FileName).ToLower();
string newFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo) + fileExt;
var fullName = Path.Combine(StorageRoot, newFileName); using (var fs = new FileStream(fullName, FileMode.Append, FileAccess.Write))
{
var buffer = new byte[]; var l = inputStream.Read(buffer, , );
while (l > )
{
fs.Write(buffer, , l);
l = inputStream.Read(buffer, , );
}
fs.Flush();
fs.Close();
}
statuses.Add(new ViewDataUploadFilesResult()
{
result="OK",
name = newFileName,
size = file.ContentLength,
type = file.ContentType,
url = Path.Combine(path, Path.GetFileName(newFileName)),
delete_url = "/Home/Delete/" + newFileName,
thumbnail_url = @"data:image/png;base64," + EncodeFile(fullName),
delete_type = "GET",
});
}

上传部分文件

private string ISValid(HttpPostedFileBase file,string dirName)
{
//定义允许上传的文件扩展名
Hashtable extTable = new Hashtable();
extTable.Add("image", "gif,jpg,jpeg,png,bmp");
extTable.Add("flash", "swf,flv");
extTable.Add("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb");
extTable.Add("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2"); //最大文件大小
int maxSize = ;
String fileName = file.FileName;
String fileExt = Path.GetExtension(fileName).ToLower(); if (file.InputStream == null || file.InputStream.Length > maxSize)
{
return "上传文件大小超过限制。";
} if (String.IsNullOrEmpty(fileExt) || Array.IndexOf(((String)extTable[dirName]).Split(','), fileExt.Substring().ToLower()) == -)
{
return "上传文件扩展名是不允许的扩展名。\n只允许" + ((String)extTable[dirName]) + "格式。";
}
return "OK";
}

isvalid验证上传文件是否合理

 private string EncodeFile(string fileName)
{
return Convert.ToBase64String(System.IO.File.ReadAllBytes(fileName));
}
 [HttpGet]
public void Delete(string id)
{
var filename = id;
var filePath = Path.Combine(Server.MapPath("~/Files"), filename); if (System.IO.File.Exists(filePath))
{
System.IO.File.Delete(filePath);
}
}
 

另一种图片上传 jquery.fileupload.js的更多相关文章

  1. 图片上传jQuery插件(兼容IE8)

      图片上传jQuery插件(兼容IE8) 代码来源 :https://github.com/zilan93/uploadImg   html <!DOCTYPE html> <ht ...

  2. MVC4中基于bootstrap和HTML5的图片上传Jquery自定义控件

    场景:mvc4中上传图片,批量上传,上传前浏览,操作.图片进度条. 解决:自定义jquery控件 没有解决:非图片上传时,会有浏览样式的问题; 解决方案; 1.样式 – bootstrap 的css和 ...

  3. 图片上传插件用法,JS语法【三】

    注意点: 作为文件域(<input type="file">)必须要有name属性,如果没有name属性,上传之后服务器是获取不到图片的.如:正确的写法是<inp ...

  4. ueditor 百度编辑器图片上传 接 node.js 及一些前端自定义

    百度编辑器 用node.js 做服务端 demo 大神已整理的 记录一下 以作参考 https://github.com/netpi/ueditor 1. 前端图片工具栏上传input file在这里 ...

  5. 文件上传-jquery.uploadify.js

    <script type="text/javascript" src="../jquery_uploadify/jquery.uploadify-3.1.min.j ...

  6. 图片上传预览js

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. .net mvc + layui做图片上传(二)—— 使用流上传和下载图片

    摘要:上篇文章写到一种上传图片的方法,其中提到那种方法的局限性,就是上传的文件只能保存在本项目目录下,在其他目录中访问不到该文件.这与浏览器的安全性机制有关,浏览器不允许用户用任意的路径访问服务器上的 ...

  8. .net mvc + layui做图片上传(一)

    图片上传和展示是互联网应用中比较常见的一个功能,最近做的一个门户网站项目就有多个需要上传图片的功能模块.关于这部分内容,本来功能不复杂,但后面做起来却还是出现了一些波折.因为缺乏经验,对几种图片上传的 ...

  9. 图片上传即时显示javascript代码

    这是基于javascript的一种图片上传即时显示方法,测试结果IE6和火狐浏览器可以正常使用.google浏览器不兼容. 这种方法兼容性比较差,仅供参考,建议使用ajax方法来即时显示图片. 1.首 ...

随机推荐

  1. eclipse开启断言

    断言在软件开发中是一种常用的调试方式,很多开发语言中都支持这种机制.一般来说,断言用于保证程序最基本.关键的正确性.断言检查通常在开发和测试时开启. 为了保证程序的执行效率,在软件发布后断言检查通常是 ...

  2. 如何利用.snk文件生成DLL文件中的Publickeytoken

    1.在该路径下C:\Program Files (x86)\Microsoft SDKs\Windows\v7.0A\bin查找是否有sn.exe. 没有的话,从网上下载,注意需要的版本. 2.打开c ...

  3. TortoiseSVN安装使用

    TortoiseSVN是windows平台下Subversion的免费开源客户端. 一般我们都是先讲讲服务器的配置,然后再讲客户端的使用,但是在TortoiseSVN上,却可以反过来.因为,如果你的要 ...

  4. Python3基础 isinstance 判断一个变量是否为指定的类型

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...

  5. 遗传算法在JobShop中的应用研究(part3:交叉)

    2.交叉 交叉是遗传算法中的一个重要操作,它的目的是从两条染色体中各自取出一部分来组合成一条新的染色体这里,在车间调度中一种常见的交叉方法叫Generalized Order Crossover方法( ...

  6. FreeSWITCH中文语音包

    一.中文语音资源的获取 官方提供的资源:http://files.freeswitch.org/releases/sounds/ 自己录音 实在不行可以@我给你发一份. 二.中文资源的安装 英文资源的 ...

  7. 开发板上使用core文件调试

    转载:http://www.nginx.cn/1521.html 如果开发板的操作系统也是linux,core调试方法依然适用.如果开发板上不支持gdb,可将开发板的环境(依赖库).可执行文件和cor ...

  8. javascript中数组常用的方法

    在JavaScript中,数组可以使用Array构造函数来创建,或使用[]快速创建,这也是首选的方法.数组是继承自Object的原型,并且他对typeof没有特殊的返回值,他只返回'object'. ...

  9. 基础知识复习(二)——stdafx.h 头文件及x&(x-1)运算

    今天好久没写过C++程序了,使用VS2013 新建空的控制台程序,结果自动生成了头文件和main 方法. 就了解了stdafx.h头文件的含义及用法. stdafx:standard Applicat ...

  10. WPF:ListView 分页

    布局MainWindow.xaml <ListView Name="list_Reg" ItemsSource="{Binding Source={StaticRe ...