最近又被拉来做C#的一个项目了,里边有一个上传图片的功能要实现,现在把我用的方法上传一下。 用了一下两个js文件,把图片传到相应的文件夹中。
js文件下载地址
http://files.cnblogs.com/files/chenwolong/upload.rar
前台代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="usercenter/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="usercenter/js/jquery-1.11.1.min.js"></script>
<script src="usercenter/js/jquery.html5upload.js" type="text/javascript"></script>
<script src="usercenter/js/jquery.MultiFile.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="mainPicNum" name="mainPicNum" type="file" class="" accept="gif|jpg|jpeg|png|bmp|pic" maxlength="1" onchange="change()" />
</div>
<div id="result" style="padding-top:5px;">
</div>
</form>
</body>
</html>
<script type="text/javascript">
$(function () {
var result = document.getElementById("result");
var input = document.getElementById("mainPicNum");
if (typeof FileReader === 'undefined') {
result.innerHTML = "抱歉,你的浏览器不支持 FileReader,请使用火狐浏览器,或其他兼容浏览器!";
input.setAttribute('disabled', 'disabled');
}
$("#mainPicNum").MultiFile({
afterFileSelect: function (element, value, master_element) {
readFile.call(element);
},
afterFileRemove: function (element, value, master_element) {
$('img').each(function () {
if ($(this).data('src') && (element.files[0].name == $(this).data('src'))) {
$(this).remove();
}
});
}
});
function readFile() {
var file = this.files[0];
if (!/image\/\w+/.test(file.type)) {
alert("文件必须为图片!");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
result.innerHTML += '<img data-src="' + file.name + '" src="' + this.result + '" alt="" style=" height:100px; width:100px;"/>';
}
}
});
$('#mainPicNum').Html5Upload({
url: 'UploadImage.ashx?action=action',
perLoading: function (data, curindex) {
// console.log(data)
//$(".MultiFile-remove").css("display", "none");
//$(".MultiFile-title").css("display", "none");
},
perLoaded: function (curindex, data) {
//alert(data);
//alert("上传头像成功");
//var img = '<img src="/Images/foo.png" style="background-image: url(\'' + data + '\');" />';
// $('#hiddenImg').val(data);
// $(".js_pic").html(img);
}
});
</script>
后台代码,一般处理程序
using System;
using System.Collections.Generic;
using System.Drawing;
using System.IO;
using System.Linq;
using System.Web;
namespace LLYY
{
/// <summary>
/// UploadImage 的摘要说明
/// </summary>
public class UploadImage : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
if (HttpContext.Current.Request.QueryString["action"] == "action")
{
uppic();
}
context.Response.ContentType = "text/plain";
}
protected void uppic()
{
string fileTim = DateTime.Now.ToString("yyyMddHHmmssffff");
string pic = HttpContext.Current.Request.Form["pic"];
pic = HttpContext.Current.Server.UrlDecode(pic);
if (pic != null)
{
pic = pic.Split(',')[1];
MemoryStream stream = new MemoryStream(Convert.FromBase64String(pic));
Bitmap image = new Bitmap(stream);
string fileurl = "/usercenter/uppic/";
string serverPath = HttpContext.Current.Server.MapPath(fileurl);
if (Directory.Exists(serverPath) == false)//如果不存在就创建file文件夹
{
Directory.CreateDirectory(serverPath);
}
string picNum=Guid.NewGuid().ToString("N");
string url = fileurl +picNum + ".png";
image.Save(HttpContext.Current.Server.MapPath(url));
HttpContext.Current.Response.Write(url);
}
HttpContext.Current.Response.End();
}
public bool IsReusable
{
get
{
return false;
}
}
}
}