Uploadify在MVC3不起作用 [英] Uploadify in MVC3 does not work
本文介绍了Uploadify在MVC3不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
无法获得此做任何事情。当我点击上传文件绝对没有任何反应，以及我没有看到任何渲染到屏幕上的闪光。我相信这是主题相关的jQuery的，但我不知道。请帮忙！如果有人可以邮寄我uploadify一个简单的解决方案，VS2010工作，infinitimods在gmail.com，实际工作我最好的AP preciate甚至更多！感谢一大堆！
我的布局文件： ＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;标题＆GT; @ ViewBag.Title＆LT; /标题＆GT;
＆LT;链接HREF =@ Url.Content（〜/内容/的site.css）的rel =stylesheet属性类型=文/ CSS/＆GT;
＆LT;链接类型=文/ CSS相对=样式媒体=屏幕上的href =/脚本/ uploadify / uploadify.css/＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =/脚本/ uploadify / swfobject.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =/脚本/ uploadify / jquery.uploadify.v2.1.4.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =/脚本/ uploadify / jQuery的-1.4.2.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; /头＆GT; ＆LT;身体GT;
@RenderBody（）
＆LT; /身体GT;
＆LT; / HTML＆GT;我的索引文件： @ {
ViewBag.Title =指数;
布局=〜/查看/共享/ _Layout.cshtml
} ＆LT; H2＆GT;指数＆LT; / H＆GT; @using（Html.BeginForm（一个UploadFile，家，FormMethod.Post，新{ENCTYPE =的multipart / form-data的}））
{
＆LT;脚本类型=文/ JavaScript的＆GT;
$（文件）。就绪（函数（）{ $（＃file_upload）。uploadify（{
'上传'：'〜/脚本/ uploadify / uploadify.swf'，
cancelImg：〜/脚本/ uploadify /图像/ cancel.png'，
buttonText：上传照片，
'脚本'：'/主页/ UploadFiles'，
文件夹：'/内容/上传'，
fileDesc'：'图像文件'，
fileExt'：'* .JPG; * JPEG，GIF *; * PNG;。 *。文本;'，
scriptData：{thisGuid'：$（＃输入ID）VAL（）}，
多：假的，
自动：真实，
onError的'：函数（事件，queueID，FileObj文件，errorObj）{
警报（错误!!!类型：+ errorObj.type +]信息[+ errorObj.info +]）;
}
}）; $（＃btnSave）。按钮（）。点击（函数（事件）{
$（'＃file_upload'）uploadifyUpload（）;
}）;
}）; ＆LT; / SCRIPT＆GT; ＆LT;输入ID =file_upload类型=文件/＆GT; ＆LT;输入类型=按钮ID =btnSaveVALUE =上传文件/＆GT; ＆LT;输入ID =IDNAME =ID类型=隐藏值=5168e-亚达，亚达/＆GT;
}我的控制器：公共类HomeController的：控制器
{
///＆LT;总结＆gt;
///
///＆LT; /总结＆gt;
///＆LT;＆回报GT;＆LT; /回报＆GT;
[HTTPGET]
公众的ActionResult指数（）
{
返回查看（「指数」）;
} ///＆LT;总结＆gt;
///
///＆LT; /总结＆gt;
///＆LT; PARAM NAME =FILEDATA＆GT;＆LT; /参数＆GT;
///＆LT; PARAM NAME =形式＆GT;＆LT; /参数＆GT;
///＆LT;＆回报GT;＆LT; /回报＆GT;
[HttpPost]
公共字符串UploadFile（HttpPostedFileBase FILEDATA，形式的FormCollection）
{
返回确定;
}
}
解决方案
Uploadify需要jQuery的。这意味着你需要包括前的uploadify脚本jQuery脚本。如果您在JavaScript调试控制台期待已久你会看到这个错误。
因此，布局：
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;标题＆GT; @ ViewBag.Title＆LT; /标题＆GT;
＆LT;链接HREF =@ Url.Content（〜/脚本/ uploadify / uploadify.css）TYPE =文/ CSS的rel =stylesheet属性的媒体=屏幕/＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =@ Url.Content（〜/脚本/ uploadify / swfobject.js）＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =@ Url.Content（〜/脚本/ uploadify / jQuery的-1.4.2.min.js）＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =@ Url.Content（〜/脚本/ uploadify / jquery.uploadify.v2.1.4.min.js）＆GT;＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;＆LT;身体GT;
@RenderBody（）
＆LT; /身体GT;
＆LT; / HTML＆GT;
控制器：
公共类HomeController的：控制器
{
公众的ActionResult指数（）
{
返回查看（）;
} [HttpPost]
公众的ActionResult UploadFile（HttpPostedFileBase FILEDATA，串thisGuid）
{
如果（FILEDATA =空＆放大器;！＆放大器; fileData.ContentLength大于0）
{
VAR APPDATA =使用Server.Mappath（〜/ App_Data文件）;
var文件= Path.Combine（AppData的，Path.GetFileName（fileData.FileName））;
fileData.SaveAs（文件）;
}
返回JSON（新{状态=真}）;
}
}
和视图：
@ {
ViewBag.Title =指数;
布局=〜/查看/共享/ _Layout.cshtml
}＆LT;脚本类型=文/ JavaScript的＆GT;
$（文件）。就绪（函数（）{
$（'＃file_upload'）。uploadify（{
'上传'：'@ Url.Content（〜/脚本/ uploadify / uploadify.swf）'，
cancelImg'：'@ Url.Content（〜/脚本/ uploadify /图像/ cancel.png）'，
buttonText：选择图片，
脚本：$（'形式'）ATTR（行动）。
fileDesc'：'图像文件'，
fileExt'：'* .JPG; * JPEG，GIF *; * PNG;。 *。文本;'，
多：假的，
自动：假的，
onError的'：函数（事件，queueID，FileObj文件，errorObj）{
警报（错误!!!类型：+ errorObj.type +]信息[+ errorObj.info +]）;
}
}）; $（'形式'）。提交（函数（）{
$（'＃file_upload'）uploadifySettings（'scriptData'，{thisGuid：$（'＃ID）VAL（）}）;
$（'＃file_upload'）uploadifyUpload（）;
返回false;
}）;
}）;
＆LT; / SCRIPT＆GT;
＆LT; H2＆GT;指数＆LT; / H＆GT;@using（Html.BeginForm（一个UploadFile，家，FormMethod.Post，新{ENCTYPE =的multipart / form-data的}））
{
＆LT;输入ID =IDNAME =ID类型=隐藏值=5168e-亚达，亚达/＆GT;
＆LT;输入ID =file_upload类型=文件名称=FILEDATA/＆GT;
＆LT;输入类型=提交值=上传文件/＆GT;
}
如果你想在用户选择，你可以摆脱形式和提交按钮，并设置汽车属性<$照片踢上载过程C $ C>真正：
@ {
ViewBag.Title =指数;
布局=〜/查看/共享/ _Layout.cshtml
}＆LT;脚本类型=文/ JavaScript的＆GT;
$（文件）。就绪（函数（）{
$（'＃file_upload'）。uploadify（{
'上传'：'@ Url.Content（〜/脚本/ uploadify / uploadify.swf）'，
cancelImg'：'@ Url.Content（〜/脚本/ uploadify /图像/ cancel.png）'，
buttonText：选择图片，
脚本：$（'形式'）ATTR（行动）。
fileDesc'：'图像文件'，
fileExt'：'* .JPG; * JPEG，GIF *; * PNG;。 *。文本;'，
多：假的，
自动：真实，
scriptData：{thisGuid：$（'＃ID）VAL（）}，
onError的'：函数（事件，queueID，FileObj文件，errorObj）{
警报（错误!!!类型：+ errorObj.type +]信息[+ errorObj.info +]）;
}
}）;
}）;
＆LT; / SCRIPT＆GT;
＆LT; H2＆GT;指数＆LT; / H＆GT;＆LT;输入ID =IDNAME =ID类型=隐藏值=5168e-亚达，亚达/＆GT;
＆LT;输入ID =file_upload类型=文件名称=FILEDATA/＆GT;
另外别忘了结帐的 uploadify文档更好地了解使用了哪些不同的选项对，你也可以看到一些例子。
Can't get this to do anything. When I click 'Upload File' absolutely nothing happens as well as I don't see any of the flash rendered to the screen. I believe this is somehow related to the jquery, but I am not sure. PLEASE HELP! If someone can mail me a simple VS2010 solution with uploadify working to infinitimods at gmail.com that actually works I'd appreciate even more! Thanks a bunch!
My Layout file:
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link type="text/css" rel="Stylesheet" media="screen" href="/Scripts/uploadify/uploadify.css" />
<script type="text/javascript" src="/Scripts/uploadify/swfobject.js"></script>
<script type="text/javascript" src="/Scripts/uploadify/jquery.uploadify.v2.1.4.min.js"></script>
<script type="text/javascript" src="/Scripts/uploadify/jquery-1.4.2.min.js"></script>
</head>
<body>
@RenderBody()
</body>
</html>
My index file:
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>
@using (Html.BeginForm("UploadFile", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<script type="text/javascript">
$(document).ready(function () {
$("#file_upload").uploadify({
'uploader': '~/Scripts/uploadify/uploadify.swf',
'cancelImg': '~/Scripts/uploadify/images/cancel.png',
'buttonText': 'Upload foto',
'script': '/Home/UploadFiles',
'folder': '/Content/upload',
'fileDesc': 'Image Files',
'fileExt': '*.jpg;*.jpeg;*.gif;*.png; *.txt;',
'scriptData': { 'thisGuid': $("input#Id").val() },
'multi': false,
'auto': true,
'onError': function (event, queueID, fileObj, errorObj) {
alert("Error!!! Type: [" + errorObj.type + "] Info [" + errorObj.info + "]");
}
});
$("#btnSave").button().click(function (event) {
$('#file_upload').uploadifyUpload();
});
});
</script>
<input id="file_upload" type="file" />
<input type="button" id="btnSave" value="Upload file" />
<input id="Id" name="Id" type="hidden" value="5168e-yada-yada" />
}
My controller:
public class HomeController : Controller
{
/// <summary>
///
/// </summary>
/// <returns></returns>
[HttpGet]
public ActionResult Index()
{
return View("Index");
}
/// <summary>
///
/// </summary>
/// <param name="fileData"></param>
/// <param name="form"></param>
/// <returns></returns>
[HttpPost]
public string UploadFile(HttpPostedFileBase fileData, FormCollection form)
{
return "ok";
}
}
解决方案
Uploadify requires jQuery. This means that you need to include the jQuery script before the uploadify script. If you had looked in your javascript debugging console you would have seen this error.
So, the layout:
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Scripts/uploadify/uploadify.css")" type="text/css" rel="stylesheet" media="screen" />
<script type="text/javascript" src="@Url.Content("~/Scripts/uploadify/swfobject.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/uploadify/jquery-1.4.2.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/uploadify/jquery.uploadify.v2.1.4.min.js")"></script>
</head>
<body>
@RenderBody()
</body>
</html>
The controller:
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult UploadFile(HttpPostedFileBase fileData, string thisGuid)
{
if (fileData != null && fileData.ContentLength > 0)
{
var appData = Server.MapPath("~/app_data");
var file = Path.Combine(appData, Path.GetFileName(fileData.FileName));
fileData.SaveAs(file);
}
return Json(new { status = true });
}
}
and the view:
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script type="text/javascript">
$(document).ready(function () {
$('#file_upload').uploadify({
'uploader': '@Url.Content("~/Scripts/uploadify/uploadify.swf")',
'cancelImg': '@Url.Content("~/Scripts/uploadify/images/cancel.png")',
'buttonText': 'Select photo',
'script': $('form').attr('action'),
'fileDesc': 'Image Files',
'fileExt': '*.jpg;*.jpeg;*.gif;*.png; *.txt;',
'multi': false,
'auto': false,
'onError': function (event, queueID, fileObj, errorObj) {
alert("Error!!! Type: [" + errorObj.type + "] Info [" + errorObj.info + "]");
}
});
$('form').submit(function () {
$('#file_upload').uploadifySettings('scriptData', { thisGuid: $('#id').val() });
$('#file_upload').uploadifyUpload();
return false;
});
});
</script>
<h2>Index</h2>
@using (Html.BeginForm("UploadFile", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<input id="id" name="id" type="hidden" value="5168e-yada-yada" />
<input id="file_upload" type="file" name="fileData" />
<input type="submit" value="Upload file" />
}
And if you want to kick the uploading process when the user selects a photo you could get rid of the form and the submit button and set the auto property to true:
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script type="text/javascript">
$(document).ready(function () {
$('#file_upload').uploadify({
'uploader': '@Url.Content("~/Scripts/uploadify/uploadify.swf")',
'cancelImg': '@Url.Content("~/Scripts/uploadify/images/cancel.png")',
'buttonText': 'Select photo',
'script': $('form').attr('action'),
'fileDesc': 'Image Files',
'fileExt': '*.jpg;*.jpeg;*.gif;*.png; *.txt;',
'multi': false,
'auto': true,
'scriptData': { thisGuid: $('#id').val() },
'onError': function (event, queueID, fileObj, errorObj) {
alert("Error!!! Type: [" + errorObj.type + "] Info [" + errorObj.info + "]");
}
});
});
</script>
<h2>Index</h2>
<input id="id" name="id" type="hidden" value="5168e-yada-yada" />
<input id="file_upload" type="file" name="fileData" />
Also don't forget to checkout the uploadify documentation to better understand what the different options are used for and also you can see some examples.
这篇关于Uploadify在MVC3不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
