html5(拖拽3)
<!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;
}
}
}
html5(拖拽3)的更多相关文章
- Html5拖拽复制
拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖拽是标准的一部分,任何元素都能够拖拽. Html5拖拽非常常见的一个功能,但是大部分拖拽的案例都是一个剪切的过程, 项目中需 ...
- html5拖拽
html5拖拽一 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...
- HTML5 拖拽复制功能的实现方法
Internet Explorer 9FirefoxOpera 12ChromeSafari 5 v1.0代码部分 <!DOCTYPE html><html><head& ...
- 每天一个JavaScript实例-html5拖拽
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- HTML5拖拽功能中 dataTransfer对象详解
有了HTML5,老板再也不用担心我们的上传了,再加上有拖拽上传是不是很酷.百度一下,有关HTML5拖拽上传的文章和实例不少,都缺不了一个至关重要的东东DataTransfer.但是详细介绍的不多,尤其 ...
- 基于html5拖拽api实现列表的拖拽排序
基于html5拖拽api实现列表的拖拽排序 html代码: <ul ondrop="drop_handler(event);" ondragover="dragov ...
- html5拖拽事件 xhr2 实现文件上传 含进度条
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- html5拖拽总结
拖拽(Drag 和 drop)是 HTML5 标准的组成部分.拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. Internet Explorer 9.Firefox.Opera 12.Chrom ...
- HTML5拖拽实例
最近应该会用到,借用一下......小妹儿,你又变懒了 拖拽相关属性 draggable属性是html5的全局属性,是html5支持拖放操作的方式之一,用来表示元素是否可以被拖放,draggable有 ...
- html之div拖拽，html5拖拽
html之div拖拽 http://www.w3school.com.cn/html5/html_5_draganddrop.asp
随机推荐
- pandas中层次化索引与切片
Pandas层次化索引 1. 创建多层索引 隐式索引: 常见的方式是给dataframe构造函数的index参数传递两个或是多个数组 Series也可以创建多层索引 Series多层索引 B =Ser ...
- python解析库之 XPath
1. XPath (XML Path Language) XML路径语言 2. XPath 常用规则: nodename 选取此节点的所有子节点 / 从当前 ...
- printk的使用技巧
在 linux/kernel.h 中有相应的宏对应. #define KERN_EMERG "<0>" /* system is unusable */#d ...
- C语言结构体初始化的四种方法（转载）
原文:https://blog.csdn.net/ericbar/article/details/79567108 定义 struct InitMember { int first: double s ...
- poj 2676 数独问题 dfs
题意:完成数独程序,数独要求每行每列且每个3*3矩阵都必须是1~9的数字组成. 思路:dfs 用row[i][n] 记录第i行n存在 用col[j][n] 记录第j列n存在 grid[k][n] 记 ...
- install mongodb on macos
Update Homebrew’s package database. In a system shell, issue the following command: brew update 2 In ...
- HDU 4871 Shortest-path tree 最短路 + 树分治
题意: 输入一个带权的无向连通图 定义以顶点\(u\)为根的最短路生成树为: 树上任何点\(v\)到\(u\)的距离都是原图最短的,如果有多条最短路,取字典序最小的那条. 然后询问生成树上恰好包含\( ...
- day03_11 if语句实现猜年龄01
老男孩猜年龄游戏 age_of_princal = 56 guess_age = int( input(">>:") ) #以下为伪代码 ''' if guess_ag ...
- MongoDB 3.6 安装详解
在ubuntu和多数linux发行版的包安装源中MongoDB默认的版本是2.4,但2.4所使用的存储引擎不支持collecitons级别的锁,只支持database级别的,所以在开发中2.4版本的m ...
- install and config redis on ubuntu14.04
1.installation: (1)download redis from http://redis.io/download (2)installation: $ tar -xvf redis-3. ...