<!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;
}
}
}
