JS文件:
var FileName = "";
var FileStr = "";
(function () {
function $id(id) {
return document.getElementById(id);
}
function Output(msg) {
var m = $id("filedrag");
m.innerHTML = msg + m.innerHTML;
}
function FileDragHover(e) {
e.stopPropagation();
e.preventDefault();
e.target.className = (e.type == "dragover" ? "hover" : "");
}
function FileSelectHandler(e) {
FileDragHover(e);
var files = e.target.files || e.dataTransfer.files;
for (var i = , f; f = files[i]; i++) {
ParseFile(f);
UploadFile(f); //暂时注释
}
}
function ParseFile(file) { //pic类型
if (file.type.indexOf("image") == ) {
var reader = new FileReader();
reader.onload = function (e) {
Output(
"<p><strong>" + file.name + ":</strong><br />" +
'<img src="' + e.target.result + '" /></p>'
);
FileStr=e.target.result;
}
reader.readAsDataURL(file);
}
//文本类型处理
if (file.type.indexOf("text") == ) {
var reader = new FileReader();
reader.onload = function (e) {
Output(
"<p><strong>" + file.name + ":</strong></p><pre>" +
e.target.result.replace(/</g, "&lt;").replace(/>/g, "&gt;") +
"</pre>"
);
}
reader.readAsText(file);
}
}
function uploadProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * / evt.total);
document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
}
else {
document.getElementById('progressNumber').innerHTML = '';
}
}
function UploadFile(file) {
$id("filedrag").innerHTML = ""; //清空当前fileDrg的信息
if (location.host.indexOf("sitepointstatic") >= ) return
var xhr = new XMLHttpRequest();
if (xhr.upload && file.size <= $id("sizebyte").value && file.type == "image/jpeg") {
var o = $id("progress");
var progress = o.appendChild(document.createElement("p"));
// progress.appendChild(document.createTextNode("名称: " + file.name));
// xhr.upload.addEventListener("progress", function (e) {
// var pc = parseInt(100 - (e.loaded / e.total * 100));
// progress.style.backgroundPosition = pc + "% 0";
// }, true);
xhr.onreadystatechange = function (e) {
alert(xhr.readyState);
if (xhr.readyState == ) {
progress.className = (xhr.status == ? "success" : "failure");
}
};
var files = file.name;
FileName=file.name;
}
}
$("#btnUpload").click(function () {
if ($("#fileselect").val() == "") {
if(FileStr==""){
alert("请选择一个图片文件,再点击上传。");
return;
}else{
$.post(
"SaveServer.ashx",
{FileStr:FileStr},
function(data){
alert("成功");
$("#fileselect").val("");
});
}
}else{
$.post(
"SaveServer.ashx",
{FileStr:FileStr},
function(data){
alert("成功");
$("#fileselect").val(""); });
} });
function Init() {
var hh = this;
var fileselect = $id("fileselect"),
filedrag = $id("filedrag")/
fileselect.addEventListener("change", FileSelectHandler, false); var xhr = new XMLHttpRequest();
if (xhr.upload) { filedrag.addEventListener("progress", uploadProgress, false);
filedrag.addEventListener("dragover", FileDragHover, false); //如果鼠标移动但停留在同一个控件中,则引发DragOver事件
filedrag.addEventListener("dragleave", FileDragHover, false); //如果用户移出一个窗口,则引发DragLeave事件
filedrag.addEventListener("drop", FileSelectHandler, false); //完成拖放操作
filedrag.style.display = "block";
upButton.style.display = "block";
} }
if (window.File && window.FileList && window.FileReader) {
Init();
} else {
upButton.style.display = "block";
alert("您的浏览器不支持File API");
}
})();
后台接受页面:
context.Response.ContentType = "text/plain";
string[] aa = context.Request.Form["FileStr"].Split(',');
MemoryStream ms = new MemoryStream(Convert.FromBase64String(aa[]));
Bitmap b = new Bitmap(ms);
string serverPath = System.Web.HttpContext.Current.Server.MapPath("~"); string toFilePath = Path.Combine(serverPath, @"images\headimg\");
string pach = toFilePath + GetImageName() + ".jpg";
b.Save(pach);
context.Response.Write("yes");
context.Response.End();

HTML5文件拖拽上传记录的更多相关文章

  1. html5 文件拖拽上传

    本文首先发表在  码蜂笔记 : http://coderbee.net/index.php/web/20130703/266 html5 文件拖拽上传是个老话题了,网上有很多例子,我一开始的代码也是网 ...

  2. HTML5应用之文件拖拽上传

    使用HTML5的文件API,可以将操作系统中的文件拖放到浏览器的指定区域,实现文件上传到服务器.本文将结合实例讲解HTML5+jQuery+PHP实现拖拽上传图片的过程,来看下HTML5的魅力吧. H ...

  3. day25—JavaScript实现文件拖拽上传案例实践

    转行学开发,代码100天——2018-04-10 今天记录一个利用JavaScript实现文件拖拽上传到浏览器,后天将文件打开的小案例. 基本功能:1点击添加文件 2 文件拖拽添加 html: < ...

  4. php和js实现文件拖拽上传

    Dropzone.js实现文件拖拽上传 http://www.sucaihuo.com/php/1399.html demo http://www.sucaihuo.com/jquery/13/139 ...

  5. [开源应用]利用HTTPHandler+resumableJs+HTML5实现拖拽上传[大]文件

    前言: 大文件传输一直是技术上的一大难点.文件过大时,一些性提交所有的内容进内存是不现实的.大文件带来问题还有是否支持断点传输和多文件同时传输. 本文以resumableJs为例,介绍了如何在ASP. ...

  6. Nodejs express、html5实现拖拽上传

    一.前言 文件上传是一个比较常见的功能,传统的选择方式的上传比较麻烦,需要先点击上传按钮,然后再找到文件的路径,然后上传.给用户体验带来很大问题.html5开始支持拖拽上传的需要的api.nodejs ...

  7. Dropzone.js实现文件拖拽上传

    dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 使用Dropzo ...

  8. html5实现拖拽上传

    <html><head> <meta http-equiv="Content-Type" content="text/html; chars ...

  9. Dropzone.js文件拖拽上传提示Dropzone already attached 解决

    最近收到客户的反馈,在操作上传文件有时会出现没有任何.大部分时间是正常. 重现问题后,f12打开后台控制台发现如下提示: Uncaught Error: Dropzone already attach ...

随机推荐

  1. 【C#】删除集合(Collection)里的元素(Item)

    问题:C#中如果想要删除一个集合中的所有元素,直接for循环边读边删除是不可行的.因为每删除一个元素,后面的元素就会往前排,即它们的索引会向前-1,然后i还是正常的自增,就会跳过下一个元素. // 错 ...

  2. Iconfont在移动端遇到问题的探讨

    Iconfont越来越得到前端的关注,特别是阿里那个iconfont库的推出和不断完善,再加上连IE6都能兼容,的确是个好东西. 既然那么火,我们公司移动项目也计划加入这个iconfont,于是我就针 ...

  3. iOS边练边学--view的封装

    一.view封装的思路: *如果一个view内部的子控件比较多,一般会考虑自定义一个view,把它内部的子控件的创建屏蔽起来,不让外界关心 *外界可以传入对应的模型数据给view,view拿到模型数据 ...

  4. 关于添加图片到svg中,rails下使用js, 用parseFloat来调整force.on时的位置

    注意在代码中用/表示路径...windows中file才是\ 1.<image xlink:href=<%= asset_path 'vnet/virtual_switch.png' %& ...

  5. [oracle] 两种权限:系统权限VS对象权限

    系统权限表示对表和表空间等   有无操作权  的权限.一般是SYS用户这种DBA来授权.比如: grant create session to lisi grant create table to l ...

  6. php插入htm htm插入php的变量

    <?php $file = "ueditor\php\upload\image\*\*.png"; foreach (glob("$file") as $ ...

  7. JVM内存模型 小小结

    可以看一下我的另一篇总结 JVM运行时数据区与JVM堆内存模型小结 推荐一篇文章,尚学堂的 Java内存模型深度解读 . 不方便全文转载,就摘录下吧. 以往的认知都是以基本类型.引用类型.常量.方法等 ...

  8. linux源代码编译安装OpenCV

    为了尽可能保证OpenCV的特性,使用OpenCV源代码编译安装在linux上.先从安装其依赖项開始,以ubuntu 14.04.X为例解说在Linux上源代码编译安装OpenCV,其它linux版本 ...

  9. MySQL Date函数的正确用法

    以下的文章主要介绍的是MySQL Date函数的实际应用其中包括如何获取当前时间的具体操作,Unix时间的具体应用,时间前后.时间间隔与时间转换的实际内容描述,以下就是文章的主要内容. MySQL D ...

  10. js中页面跳转(href)中文参数传输方式

    编码: escape(参数); 解码: unescape(参数);