MVC中拖放文件 [英] Drag and drop files in mvc
本文介绍了MVC中拖放文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想用拖放drop..i上传文件都写code如下，但每次它显示上传失败...... PLZ谁能告诉我wherei我错了......我想拖从外项目源，我想上传我的文件夹中，但我不能做it..plz错尽快怎么我今天提交它告诉我whts。
有关控制器： -
公众的ActionResult文件（）
{
返回查看（）;
}///＆LT;总结＆gt;
///以字节为单位的最大文件大小
///＆LT; /总结＆gt;
保护INT的maxRequestLength
{
得到
{
HttpRuntimeSection节=
ConfigurationManager.GetSection（的System.Web /的httpRuntime）作为HttpRuntimeSection; 如果（节！= NULL）
返回section.MaxRequestLength * 1024; // 默认值
其他
返回4096 * 1024; // 默认值
}
}///＆LT;总结＆gt;
///检查如果一个文件被发送到服务器
///并将其保存到文件夹上传。
///＆LT; /总结＆gt;
[HttpPost]
私人无效handleFileUpload（）
{
如果（！string.IsNullOrEmpty（Request.Headers [X文件名]））
{
字符串路径=使用Server.Mappath（的String.Format（〜/上传/ {0}，Request.Headers [X文件名]））;
流的InputStream = Request.InputStream; FILESTREAM的FileStream =新的FileStream（路径，FileMode.OpenOrCreate）; inputStream.CopyTo（FILESTREAM）;
fileStream.Close（）;
}
}
和观点是： -
＆LT;！DOCTYPE HTML＆GT;＆LT; HTML和GT;
＆LT;头=服务器＆GT;
＆LT;标题＆GT;将N'拖放文件上传＆LT; /标题＆GT;
＆LT;链接HREF =/ style.css文件的rel =stylesheet属性/＆GT;
＆LT;风格＆GT;
身体
{
字体：12px的宋体;
}＃拖放区
{
边界半径：5像素;
边界：2px的固体#CCC;
背景色：#eee;
宽度：250像素;
填充：50像素0;
文本对齐：中心;
字体大小：18像素;
颜色：＃555;
保证金：50像素自动;
}＃dropZone.hover
{
边框颜色：#aaa;
背景色：#ddd;
}＃dropZone.error
{
边框颜色：＃F00;
背景色：#faa;
}
＆LT; /风格＆GT;
＆所述; SCRIPT SRC =http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js＆GT;＆下; /脚本＆GT; ＆LT;脚本类型=文/ JavaScript的＆GT;
VAR悬浮窗; //初始化悬浮窗
$（文件）。就绪（函数（）{
悬浮窗= $（'＃悬浮窗'）;
dropZone.removeClass（'错误'）; //检查是否存在window.FileReader使
//确保浏览器支持的文件上传
如果（typeof运算（window.FileReader）==未定义）{
dropZone.text（浏览器不支持！）;
dropZone.addClass（'错误'）;
返回;
} //添加一个很好的牵制效应
悬浮窗[0] = .ondragover功能（）{
dropZone.addClass（'悬停'）;
返回false;
}; //停止我们的拖放时，请取出拖曳作用
悬浮窗[0] = .ondragend功能（）{
dropZone.removeClass（'悬停'）;
返回false;
}; // drop事件处理的文件发送
悬浮窗[0] = .ondrop功能（事件）{
//从窗口中打开文件停止浏览器
。事件preventDefault（）;
dropZone.removeClass（'悬停'）; //获取文件和文件阅读器
var文件= event.dataTransfer.files [0]; @ *如果（file.size＆GT; @maxRequestLength {
dropZone.text（'文件过大！'）;
dropZone.addClass（'错误'）;
返回false; * @
// //验证文件大小
//如果（file.size＆GT;＆LT;％=的maxRequestLength％GT;）{
// dropZone.text（'文件过大！'）;
// dropZone.addClass（'错误'）;
//返回false;
//} //发送文件
VAR XHR =新XMLHtt prequest（）;
// xhr.upload.addEventListener（进步，上传进度，FALSE）;
xhr.onreadystatechange = stateChange;
xhr.open（'POST'，'主页/ handleFileUpload'，真）;
xhr.setRequestHeader（X文件名'，file.name）;
xhr.send（文件）;
};
}）; //显示上传进度
上传进度的功能（事件）{
VAR百分比= parseInt函数（event.loaded / event.total * 100）;
$（'＃悬浮窗）文本（'上传：'+百分比+'％'）;
} //显示上传完成或者上传根据结果失败
功能stateChange（事件）{
如果（event.target.readyState == 4）{
如果（event.target.status == 200）{
$（'＃悬浮窗）文本（上传完成！'）。
}
其他{
dropZone.text（上传失败！'）;
dropZone.addClass（'错误'）;
}
}
}
//window.onload =乐趣;
//函数fun（）{
// $。员额（家用/ handleFileUpload，{}，函数（响应）{
//警报（你好）;
//}） ＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT;表ID =form1的=服务器＆GT;
＆LT; DIV ID =悬浮窗＆GT;
拖放文件此处上传。
＆LT; / DIV＆GT;
＆LT; /表及GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
解决方案
您 HandleFileUpload 动作的私人！在ASP.NET MVC控制器动作必须是公开的。此外，我建议你在使用包装语句，避免泄漏的句柄：的IDisposable 资源
[HttpPost]
公众的ActionResult HandleFileUpload（）
{
如果（！string.IsNullOrEmpty（Request.Headers [X文件名]））
{
字符串路径=使用Server.Mappath（的String.Format（〜/上传/ {0}，Request.Headers [X文件名]））;
使用（VAR FILESTREAM =新的FileStream（路径，FileMode.OpenOrCreate））
{
Request.InputStream.CopyTo（FILESTREAM）;
}
返回JSON（新{成功=真}）;
} 返回JSON（新{成功= FALSE}）;
}
I want to upload file using drag and drop..i have written code as below but everytime its showing upload failed...plz can anyone tell me wherei am wrong...i want to drag items from outer source and i want to upload it in my folder but i am not able to do it..plz tell me whts wrong as soon as possible coz i have to submit it today.
For controller :-
public ActionResult File()
{
return View();
}
/// <summary>
/// The max file size in bytes
/// </summary>
protected int maxRequestLength
{
get
{
HttpRuntimeSection section =
ConfigurationManager.GetSection("system.web/httpRuntime") as HttpRuntimeSection;
if (section != null)
return section.MaxRequestLength * 1024; // Default Value
else
return 4096 * 1024; // Default Value
}
}
/// <summary>
/// Checks if a file is sent to the server
/// and saves it to the Uploads folder.
/// </summary>
[HttpPost]
private void handleFileUpload()
{
if (!string.IsNullOrEmpty(Request.Headers["X-File-Name"]))
{
string path = Server.MapPath(string.Format("~/Uploads/{0}", Request.Headers["X-File-Name"]));
Stream inputStream = Request.InputStream;
FileStream fileStream = new FileStream(path, FileMode.OpenOrCreate);
inputStream.CopyTo(fileStream);
fileStream.Close();
}
}
and for view it is :-
<!DOCTYPE html>
<html>
<head runat="server">
<title>Drag n' Drop File Upload</title>
<link href="/Style.css" rel="Stylesheet" />
<style>
body
{
font: 12px Arial;
}
#dropZone
{
border-radius: 5px;
border: 2px solid #ccc;
background-color: #eee;
width: 250px;
padding: 50px 0;
text-align: center;
font-size: 18px;
color: #555;
margin: 50px auto;
}
#dropZone.hover
{
border-color: #aaa;
background-color: #ddd;
}
#dropZone.error
{
border-color: #f00;
background-color: #faa;
}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
var dropZone;
// Initializes the dropZone
$(document).ready(function () {
dropZone = $('#dropZone');
dropZone.removeClass('error');
// Check if window.FileReader exists to make
// sure the browser supports file uploads
if (typeof(window.FileReader) == 'undefined') {
dropZone.text('Browser Not Supported!');
dropZone.addClass('error');
return;
}
// Add a nice drag effect
dropZone[0].ondragover = function () {
dropZone.addClass('hover');
return false;
};
// Remove the drag effect when stopping our drag
dropZone[0].ondragend = function () {
dropZone.removeClass('hover');
return false;
};
// The drop event handles the file sending
dropZone[0].ondrop = function(event) {
// Stop the browser from opening the file in the window
event.preventDefault();
dropZone.removeClass('hover');
// Get the file and the file reader
var file = event.dataTransfer.files[0];
@* if(file.size > @maxRequestLength {
dropZone.text('File Too Large!');
dropZone.addClass('error');
return false;*@
// // Validate file size
// if(file.size > <%=maxRequestLength%>) {
// dropZone.text('File Too Large!');
// dropZone.addClass('error');
// return false;
//}
// Send the file
var xhr = new XMLHttpRequest();
// xhr.upload.addEventListener('progress', uploadProgress, false);
xhr.onreadystatechange = stateChange;
xhr.open('POST', 'Home/handleFileUpload', true);
xhr.setRequestHeader('X-FILE-NAME', file.name);
xhr.send(file);
};
});
// Show the upload progress
function uploadProgress(event) {
var percent = parseInt(event.loaded / event.total * 100);
$('#dropZone').text('Uploading: ' + percent + '%');
}
// Show upload complete or upload failed depending on result
function stateChange(event) {
if (event.target.readyState == 4) {
if (event.target.status == 200) {
$('#dropZone').text('Upload Complete!');
}
else {
dropZone.text('Upload Failed!');
dropZone.addClass('error');
}
}
}
//window.onload = fun;
//function fun() {
// $.post("Home/handleFileUpload", {}, function (response) {
// alert("hi");
// })
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="dropZone">
Drop File Here to Upload.
</div>
</form>
</body>
</html>
解决方案
Your HandleFileUpload action is private! In ASP.NET MVC controller actions need to be public. Also I would recommend you wrapping IDisposable resources in using statements to avoid leaking handles:
[HttpPost]
public ActionResult HandleFileUpload()
{
if (!string.IsNullOrEmpty(Request.Headers["X-File-Name"]))
{
string path = Server.MapPath(string.Format("~/Uploads/{0}", Request.Headers["X-File-Name"]));
using (var fileStream = new FileStream(path, FileMode.OpenOrCreate))
{
Request.InputStream.CopyTo(fileStream);
}
return Json(new { success = true });
}
return Json(new { success = false });
}
这篇关于MVC中拖放文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
