在MVC3中提供问题HTML5文件API以进行多文件上传 [英] Giving problem HTML5 file API in MVC3 for multi file upload
本文介绍了在MVC3中提供问题HTML5文件API以进行多文件上传的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在我的应用程序中使用HTML5 File Api ...但是我的load事件在控制器给Google crome中的结果之前是cal ...并且在我运行时是mozilla，那么我的进度事件不会直接调用load event cal. ..这是我的代码...
I am using HTML5 File Api in my application...but my load event is cal before controller giving result in google crome...and when i am running this is mozilla then my progress event not call directly load event cal...this is my code...
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML5NewThumb</title>
<style>
/*From prev one */
#progressBar
{
height: 14px;
border: 1px solid #cccccc;
display: none;
border-radius:10px;
-moz-border-radius: 10px;
background-image: -moz-linear-gradient(top, #66cc00, #4b9500);
background-image: -webkit-gradient(linear, left top, left bottom, from(#66cc00), to(#4b9500));
}
#drop-area {
height: 50px;
text-align: center;
border: 2px dashed #ddd;
padding: 10px;
margin-bottom: 2em;
}
#drop-area .drop-instructions {
display: block;
height: 30px;
}
#drop-area .drop-over {
display: none;
font-size: 25px;
height: 30px;
}
#drop-area.over {
background: #ffffa2;
border: 2px dashed #000;
}
#drop-area.over .drop-instructions {
display: none;
}
#drop-area.over .drop-over {
display: block;
}
#drop-area.over .drop-over {
display: block;
font-size: 25px;
}
#file-list {
list-style: none;
margin-bottom: 3em;
}
#file-list li {
border-bottom: 1px solid #000;
margin-bottom: 0.5em;
padding-bottom: 0.5em;
}
#file-list li.no-items {
border-bottom: none;
}
#file-list div {
margin-bottom: 0.5em;
}
#file-list li img {
max-width: 200px;
}
#file-list .progress-bar-container {
width: 400px;
height: 10px;
border: 1px solid #555;
margin-bottom: 20px;
}
#file-list .progress-bar-container.uploaded {
height: auto;
border: none;
}
#file-list .progress-bar {
width: 0;
height: 10px;
font-weight: bold;
background: #6787e3;
}
#file-list .progress-bar-container.uploaded .progress-bar{
display: inline-block;
width: auto;
color: #6db508;
background: transparent;
}
#prog1
{
width: 0;
height: 10px;
font-weight: bold;
background: #6787e3;
}
</style>
</head>
<body>
<div role="main">
<section id="main-content">
<form id="form1" enctype="multipart/form-data" method="post" action="@Url.Action("Upload")" >
<input id="fileToUpload1" name="fileToUpload1" type="file" multiple="multiple"/>
<div style="width:500px;">
<div id="prog1"></div>
@*<progress id="prog"></progress>*@
<span id="prognumber"></span>
</div>
<p id="drop-area">
<span class="drop-instructions">or drag and drop files here</span>
<span class="drop-over">Drop files here!</span>
</p>
<ul id="file-list">
<li class="no-items">(no files uploaded yet)</li>
</ul>
</form>
<script>
(function () {
// /* If you want to upload only a file along with arbitary data that
// is not in the form, use this */
// var fd = new FormData();
// fd.append("author", "BigAuthor");
// fd.append("name", "Html 5 File API/FormData");
// fd.append("fileToUpload1", document.getElementById(''fileToUpload1'').files[0]);
var filesUpload = document.getElementById("fileToUpload1"),
dropArea = document.getElementById("drop-area"),
fileList = document.getElementById("file-list");
prog12 = document.getElementById("prog1");
prognumber = document.getElementById("prognumber");
function uploadFile(file) {
var li = document.createElement("li"),
div = document.createElement("div"),
img,
reader,
xhr,
fileInfo;
li.appendChild(div);
/*
If the file is an image and the web browser supports FileReader,
present a preview in the file list
*/
if (typeof FileReader !== "undefined" && (/image/i).test(file.type)) {
img = document.createElement("img");
li.appendChild(img);
reader = new FileReader();
reader.onload = (function (theImg) {
return function (evt) {
theImg.src = evt.target.result;
};
} (img));
reader.readAsDataURL(file);
}
// Uploading - for Firefox, Google Chrome and Safari
xhr = new XMLHttpRequest();
// Update progress bar
xhr.upload.addEventListener("progress", uploadProgress, false);
function uploadProgress(evt) {
if (evt.lengthComputable) {
alert("evt loaded value:" + evt.loaded);
alert("evt total value:" + evt.total);
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
prognumber.innerHTML = percentComplete + ''%'';
prog12.style.width = (evt.loaded / evt.total) * 100 + "%";
}
}
// File uploaded
xhr.upload.addEventListener("load", loadSuccess, false);
function loadSuccess(evt) {
alert("load complete");
// prog12.style.width = 0;
prog12.innerHTML = "Uploaded!";
}
xhr.open("POST", "../Home/Upload",true);
// Set appropriate headers
xhr.setRequestHeader("Cache-Control", "no-cache");
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhr.setRequestHeader("Content-Type", "multipart/form-data");
xhr.setRequestHeader("X-File-Name", file.fileName);
xhr.setRequestHeader("X-File-Size", file.fileSize);
xhr.setRequestHeader("X-File-Type", file.type);
// Send the file (doh)
xhr.send(file);
// Present file info and append it to the list of files
fileInfo = "<div>Name: " + file.name + "</div>";
fileInfo += "<div>Size: " + parseInt(file.size / 1024, 10) + " kb</div>";
fileInfo += "<div>Type: " + file.type + "</div>";
div.innerHTML = fileInfo;
fileList.appendChild(li);
}
function traverseFiles(files) {
if (typeof files !== "undefined") {
for (var i = 0, l = files.length; i < l; i++) {
uploadFile(files[i]);
}
}
else {
fileList.innerHTML = "No support for the File API in this web browser";
}
}
filesUpload.addEventListener("change", function () {
traverseFiles(this.files);
}, false);
dropArea.addEventListener("dragleave", function (evt) {
var target = evt.target;
if (target && target === dropArea) {
this.className = "";
}
evt.preventDefault();
evt.stopPropagation();
}, false);
dropArea.addEventListener("dragenter", function (evt) {
this.className = "over";
evt.preventDefault();
evt.stopPropagation();
}, false);
dropArea.addEventListener("dragover", function (evt) {
evt.preventDefault();
evt.stopPropagation();
}, false);
dropArea.addEventListener("drop", function (evt) {
traverseFiles(evt.dataTransfer.files);
this.className = "";
evt.preventDefault();
evt.stopPropagation();
}, false);
})();
</script>
</section>
</div>
</body>
</html>
控制器端
家用控制器
Controller side
Home Controller
public ActionResult HTML5NewThumb()
{
return View();
}
[HttpPost]
public ActionResult Upload(object fileToUpload1)
{
return Json(false, JsonRequestBehavior.AllowGet);
}
推荐答案
Vishal，您是否考虑过尝试使用jquery为您处理帖子?
Hi Vishal, have you thought about trying jquery to handle the post for you?
.post('@ Url.Action("MethodName"，"ControllerName")'，{inVariableName1:inVariable1Value，inVariableName2:inVariable2Value}，函数(数据) { //得到结果并用它做一些魔术 var message = data.Message;
.post('@Url.Action("MethodName", "ControllerName")', { inVariableName1: inVariable1Value, inVariableName2: inVariable2Value}, function (data) { // get the result and do some magic with it var message = data.Message;
(#resultMessage").html(message); });
("#resultMessage").html(message); });
这篇关于在MVC3中提供问题HTML5文件API以进行多文件上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
