<!DOCTYPE html"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>无标题页</title> <style type="text/css"> * { margin: 0; padding: 0; } .content { margin: 50px auto; width: 600px; border: 1px solid #ccc; padding: 20px; } .content .drag { width: 596px; min-height: 300px; background: url(images/bg.jpg) no-repeat center center; border: 2px dashed #666; } .spn-img img { max-width: 596px; } </style> <script type="text/javascript"> window.onload = function () { var oDragWrap = document.getElementById("box"); var fileList = null; //拖进 oDragWrap.addEventListener('dragenter', function (e) { e.preventDefault(); }, false); //拖离 oDragWrap.addEventListener('dragleave', function (e) { dragleaveHandler(e); }, false); //拖来拖去 , 一定要注意dragover事件一定要清除默认事件 //不然会无法触发后面的drop事件 oDragWrap.addEventListener('dragover', function (e) { e.preventDefault(); }, false); //扔 oDragWrap.addEventListener('drop', function (e) { e.preventDefault(); dropHandler(e); }, false); var dropHandler = function (e) { fileList = e.dataTransfer.files; //获取文件列表 var img = document.createElement('img'); //检测是否是拖拽文件到页面的操作 if (fileList.length == 0) { return; }; //检测文件是不是图片 if (fileList[0].type.indexOf('image') === -1) { return; } if (window.URL) { //FF4+ img.src = window.URL.createObjectURL(fileList[0]); } else if (window.webkitURL) { //Chrome8+ img.src = window.webkitURL.createObjectURL(fileList[0]); } else { //实例化file reader对象 var reader = new FileReader(); reader.onload = function (e) { img.src = this.result; } reader.readAsDataURL(fileList[0]); } oDragWrap.appendChild(img); //------------------------------- //发送请求 var xhr = new XMLHttpRequest(); var url = 'actionHandler.ashx'; var boundary = '-----------------------' + new Date().getTime(); // var fileName = file.name; xhr.open("post", url, true); xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest','Content-Type', 'multipart/form-data; boundary=' + boundary);if (window.FormData) { //Chrome12+ var formData = new FormData(); formData.append('xfile', fileList[0]); //formData.append('filename', "upfile"); //formData.append('requestToken',"t"); data = formData; } else if (fileList[0].getAsBinary) { //FireFox 3.6+ //data = "--" +boundary +crlf +"Content-Disposition: form-data; " +"name="" +'file' +""; " +"filename="" +unescape(encodeURIComponent(file.name)) +""" +crlf +"Content-Type: image/jpeg" +crlf +crlf +file.getAsBinary() +crlf +"--" +boundary +crlf +"Content-Disposition: form-data; " +"name="hostid"" +crlf +crlf +userId +crlf +"--" +boundary +crlf +"Content-Disposition: form-data; " +"name="requestToken"" +crlf +crlf +t +crlf +"--" +boundary +'--'; } xhr.send(data); } } </script> </head> <body> <div class="content"> <div class="drag" id="box"> <span class="spn-img" id="spn-img"></span> </div> </div> </body> </html>
aps.net后台代码：
<%@ WebHandler Language="C#" class="IbeaconHandler" %>
using System;
using System.Web;
using System.IO;
public class IbeaconHandler : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
try {
//获取当前Post过来的file集合对象,在这里我只获取了<input type='file' name='fileUp'/>的文件控件
HttpPostedFile file = context.Request.Files["xfile"];
if (file != null)
{
//当前文件上传的目录
string path = context.Server.MapPath("~/images/");
//当前待上传的服务端路径
string imageUrl = path +Path.GetFileName(file.FileName);
//当前文件后缀名
string ext = Path.GetExtension(file.FileName).ToLower();
//验证文件类型是否正确
if (!ext.Equals(".gif") && !ext.Equals(".jpg") && !ext.Equals(".png") && !ext.Equals(".bmp"))
{
//这里window.parent.uploadSuccess()是我在前端页面中写好的javascript function,此方法主要用于输出异常和上传成功后的图片地址
context.Response.Write("<script>window.parent.uploadSuccess('你上传的文件格式不正确！上传格式有(.gif、.jpg、.png、.bmp)');</script>");
context.Response.End();
}
//验证文件的大小
if (file.ContentLength > 1048576)
{
//这里window.parent.uploadSuccess()是我在前端页面中写好的javascript function,此方法主要用于输出异常和上传成功后的图片地址
context.Response.Write("<script>window.parent.uploadSuccess('你上传的文件不能大于1048576KB!请重新上传！');</script>");
context.Response.End();
}
//开始上传
file.SaveAs(imageUrl);
//这里window.parent.uploadSuccess()是我在前端页面中写好的javascript function,此方法主要用于输出异常和上传成功后的图片地址
//如果成功返回的数据是需要返回两个字符串，我在这里使用了|分隔 例： 成功信息|/Test/hello.jpg
context.Response.Write("<script>window.parent.uploadSuccess('Upload Success!|/Test/" + file.FileName + "');</script>");
context.Response.End();
}
else
{
//上传失败
context.Response.Write("upload lose!");
context.Response.End();
}
}
catch
{
//上传失败
context.Response.Write("upload lose!");
context.Response.End();
}
}
public bool IsReusable {
get {
return false;
}
}
}