JQuery上传插件Uploadify MVC3 上传图片
2014-01-06 16:36
267 查看
首先引入这两个
<script src="@Url.Content("~/uploadify/jquery.uploadify.js")" type="text/javascript"></script> <link href="@Url.Content("~/uploadify/uploadify.css")" rel="stylesheet" type="text/css" />
下载地址 http://download.csdn.net/detail/qq931121347/6815115
上传的JS·
$(document).ready(function () { $('#file1').uploadify({ auto: true, buttonText: '选择图片', swf: '@Url.Content("~/uploadify/uploadify.swf")', uploader: 'uploadFile', fileTypeDesc: '图片文件(*.jpg,*.png,*.gif)', fileTypeExts: '*.jpg;*.png;*.gif', onUploadSuccess: function (file, data, response) { $("#picname").val(data); $("#pic").attr("src", "/uploadfile/images/" + data); } }); }); </script>
上传控件
<input type="file" name="file1" id="file1"/>
隐藏域
<input id="picname" name="picname" type="hidden" /><br />
预览
<img id="pic" src="" height="150px;" width="150px" />
Controller
#region 上传图片 [AcceptVerbs(HttpVerbs.Post)] public ActionResult uploadFile(HttpPostedFileBase FileData) { string filename = Guid.NewGuid().ToString("N") + Path.GetExtension(FileData.FileName); string folder = Server.MapPath("/uploadfile/images/"); if (null != FileData) { try { string fullPathname = Path.Combine(folder, filename); saveFile(FileData, folder, filename); } catch (Exception ex) { filename = ex.ToString(); } } return Content(filename); } #endregion
相关文章推荐
- jquery.uploadify插件实现图片上传和预览效果
- jQuery-图片上传裁剪插件--imgAreaSelect(分析四) 上传服务器端
- jQuery实现图片上传和裁剪插件Croppie
- jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
- jquery图片上传组件jQuery File Upload插件
- jQuery插件之ajaxFileUpload(异步上传图片并实时显示,并解决onchange后ajaxFileUpload失效问题)
- Uploadify & jQuery.imgAreaSelect 插件实现图片上传裁剪
- jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
- 利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
- ASP 实例:头像上传。文件(图片)上传,头像截取(Jquery-ui插件来选取截取区域)
- jQuery 的上传图片预览插件
- 基于JQuery的图片上传预览插件(图片预览、过滤文件类型、限制图片大小、图片显示后回调)
- 带裁剪的图片上传功能jquery插件
- 利用jquery插件的图片剪切上传功能
- uploadify(jquery)插件的使用及图片上传预览
- 利用jquery插件jquery.form.js异步上传图片
- 使用SpringMVC配合jQuery文件上传插件ssi-uploader实现多图片可预览上传
- 基于Jquery插件Uploadify实现实时显示进度条上传图片
- jquery图片上传预览插件uploadView
- jQuery 图片上传插件----上传按钮 以及动态增删图片预览