注意:服务器端不准用 \\ 必须用 /,如果用\\个会出现很多不必要的麻烦,例如用\\在给用jquery给div设置背景图片时就会出错,大家甚用。
上传文件到服务器,首先在前端判断上传的这个文件是否符合某种规则,如果不符合就不会提交到服务器,如果符合就会提交到服务器,在服务器还有一层判断,这样更加安全。
1、在网站项目中新建Upload文件夹、Handlers文件夹、Tools文夹、Pages文件夹、Js文件夹
Upload文件夹--------------------------------中用于存放上传的文件;
Handlers文件夹-----------------------------中用来存放一般处理程序;
Tools文件夹----------------------------------中用来存放服务器端的工具类
Pages文件夹---------------------------------中用来存放展示的页面
JS文件夹---------------------------------------中用来存放一些js文件
2、在Js文件夹中新建MyTool.js
//判断一个文件是不是一个图片
function IsPicture(filename) {
var result = false;
//如果filename可用,并且不为空字符串
if (filename != null && typeof (filename) != undefined && filename != '') {
//当前文件扩展名
var ext = filename.substr(filename.lastIndexOf('.') + 1).toLowerCase();
//图片的各种扩展名数组
var files = 'bmp,jpg,png,tiff,gif,pcx,tga,exif,fpx,svg,psd,cdr,pcd,dxf,ufo,eps,ai,raw'.split(',');
//如果此扩展名属于图片扩展名则修改标记为true
for (var i = 0; i < files.length; i++) {
if (files[i] == ext) {
result = true;
break;
}
}
}
return result;
}
3、在Pages文件夹中新建ShowUpload.htm
Html代码主要是展示
<form action="/Handlers/UploadFile.ashx" method="post" enctype="multipart/form-data">
请选择文件:<input type="file" name="pfile" id="pfile" /><input type="submit" id="btnsubmit"value="上传" /><span id="lblMsg"></span>
</form>
前端需要判断上传的文件是不是图片
<script src="/JS/MyTool.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function () {
gosubmit();
}
function gosubmit() {
document.getElementById('btnsubmit').onclick = function () {
var filename = document.getElementById('pfile').value;
if (!IsPicture(filename)) {
document.getElementById('lblMsg').innerHTML='请上传图片';
return false;
}
return true;
}
}
</script>
4、在Tools文件夹中新建MyTool.cs
public class MyTool
{
#region ISPicture是判断一个文件是不是图片
public static bool ISPicture(HttpPostedFile file)
{
bool result = false;
string[] exts = "bmp,jpg,png,tiff,gif,pcx,tga,exif,fpx,svg,psd,cdr,pcd,dxf,ufo,eps,ai,raw".Split(new char[] { ',' });
List<string> extList = new List<string>();
extList.AddRange(exts);
string ext = Path.GetExtension(file.FileName).Substring(1).ToLower();
if(extList.Contains(ext))
{
result = true;
}
return result;
}
#endregion
#region GetMD5拿一个流的MD5值
public static string GetMD5(Stream stream)
{
string result = string.Empty;
MD5CryptoServiceProvider md5 = new MD5CryptoServiceProvider();
byte[] bytes = md5.ComputeHash(stream);
StringBuilder sb=new StringBuilder();
for (int i = 0; i < bytes.Length; i++)
{
sb.Append(bytes[i].ToString("X2"));
}
result = sb.ToString();
return result;
}
#endregion
#region CreateDirectory先去判断一个文件夹存不存在,如果不存在的话新建它
public static void CreateDirectory(string path)
{
if (!Directory.Exists(path))
{
Directory.CreateDirectory(path);
}
}
#endregion
}
5、在Handlers文件夹中新建UploadFile.ashx
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
HttpPostedFile pfile = context.Request.Files["pfile"];
//判断是不是图片
if (!MyTool.ISPicture(pfile))
{
return;
}
//准备新的文件名称,准备新的保存路径
string newfilename = MyTool.GetMD5(pfile.InputStream) + Path.GetExtension(pfile.FileName);
string newpath = context.Request.MapPath("/Upload/") + DateTime.Now.ToString("yyyyMMdd");
MyTool.CreateDirectory(newpath);
string path = Path.Combine(newpath, newfilename);
//执行保存操作
pfile.SaveAs(path);
context.Response.Write("上传成功");
}