HTML5文件拖拽上传记录

时间:2023-03-10 01:56:50
HTML5文件拖拽上传记录
 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();