jquery文件上传控件 Uploadify 问题记录
Uploadify v3.2.1
首先引用下面的文件
<!--上传控件 uploadify--> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <link href="~/uploadify/uploadify.css" rel="stylesheet" /> <script src="~/uploadify/jquery.uploadify.js"></script>
<div class="col-md-10"> <p> <!--记录地址--> <input type="text" name="UR_Icon" id="UR_Icon" class="form-control" value="@Model.xxxx" /> </p> <!--显示缩略图--> <img id="showImage" /> <!--uploadify插件--> <input type="file" name="file_upload" id="uploadify" /> <p> <button type="button" class="btn btn-default" id="upload">上传</button> <button type="button" class="btn btn-default" id="cancel">取消上传</button> </p> </div>
<script type="text/javascript"> $('#uploadify').uploadify({ uploader: '/FileUpLoad/UpLoadProcess', // 服务器端处理地址 swf: '/uploadify/uploadify.swf', // 上传使用的 Flash width: 90, // 按钮的宽度 height: 33, // 按钮的高度 buttonText: "选择图片", // 按钮上的文字 buttonCursor: 'hand', // 按钮的鼠标图标 fileObjName: 'Filedata', // 上传参数名称 // 两个配套使用 fileTypeExts: "*.jpg;*.png;*.gif", // 扩展名 fileTypeDesc: "请选择 jpg png gif 文件", // 文件说明 auto: false, // 选择之后，自动开始上传 multi: false, // 是否支持同时上传多个文件 queueSizeLimit: 1, // 允许多文件上传的时候，同时上传文件的个数 'itemTemplate': '<div id="${fileID}" class="uploadify-queue-item">\ <div class="cancel">\ <a href="javascript:$(\'#${instanceID}\').uploadify(\'cancel\', \'${fileID}\')">X</a>\ </div>\ <span class="fileName">${fileName} (${fileSize})</span><span class="data"></span>\<div class="uploadify-progress"><div class="uploadify-progress-bar"><!--Progress Bar--></div></div>\ </div>', //从服务器端脚本返回数据 'onUploadSuccess': function (file, data, response) { //设置缩略图的宽高 $('#showImage').attr('src', data).attr('style', 'width:90px;height:90px'); //给【input】 UR_Icon 控件赋值 $('#UR_Icon').val(data); //alert('id: ' + file.id // + ' - 索引: ' + file.index // + ' - 文件名: ' + file.name // + ' - 文件大小: ' + file.size // + ' - 类型: ' + file.type // + ' - 创建日期: ' + file.creationdate // + ' - 修改日期: ' + file.modificationdate // + ' - 文件状态: ' + file.filestatus // + ' - 服务器端消息: ' + data // + ' - 是否上传成功: ' + response); } }); //上传开始 $('#upload').on('click', function () { $('#uploadify').uploadify('upload', '*') }) //取消上传 $('#cancel').on('click', function () { $('#uploadify').uploadify('cancel', '*') }) </script>
服务器
public ActionResult UpLoadProcess(HttpPostedFileBase Filedata) { string now = DateTime.Now.ToString("yyyy-MM-dd"); string upLoad = "UpLoad"; // 如果没有上传文件 if (Filedata == null || string.IsNullOrEmpty(Filedata.FileName) || Filedata.ContentLength == 0) { return this.HttpNotFound(); } //获取文件的保存路径 string uploadPath = Server.MapPath("\\" + upLoad + "\\" + now); //判断上传的文件是否为空 if (Filedata != null) { //如果没有UpLoad这个文件夹 if (!Directory.Exists(uploadPath)) { Directory.CreateDirectory(uploadPath); } } // 保存到 ~/UpLoad 文件夹中，名称不变 string filename = Guid.NewGuid().ToString("N") + Path.GetExtension(Filedata.FileName); string virtualPath = string.Format("/" + upLoad + "/{0}/{1}", now, filename); // 文件系统不能使用虚拟路径 string path = this.Server.MapPath(virtualPath); Filedata.SaveAs(path); //返回虚拟路径 return Content(virtualPath); }
不同地方，视图要修改的参数。
问题集锦：
1.先点击【修改窗口】，选择文件，但是没有传就关闭 modal 了。再在【添加】按钮里面，这个进度条还在？
顺带把img的地址清楚掉。
2.添加按钮和修改按钮的逻辑问题，自己看注释
//添加 $('#mytool').on('click', 'button#addModel', function () { //加载页面基本信息 $.ajax({ url: "/AdminUser/AdminUserForm", type: "post", //参数：（html5:MenuForm页面html数据） success: function (html5) { //只有在没赋值的情况下，才创建 if ($("#createModal").html() == "") { $("#createModal").html(html5); //弹出框show $("#myModal").modal("show"); } else { //点“添加”，清除掉进度条 $('#uploadify-queue').html(''); //重置添加 modal 里面的 input 的值为 null $("#formMenu input[type='text']").val(''); //让select 选择 +<option selected="selected" value="-1">请选择一项数据！</option> $("#formMenu select").val('-1'); } //重置添加 modal 里面的 img 的值为 默认图片 $('#showImage').attr('src', 'UpLoad/image.png').attr('style', 'width:200px;height:150px'); } }); }) /** * 编辑 */ $('#dataTables-example tbody').on('click', 'button#editrow', function () { //当前行数据 var rows = tables.row($(this).parents('tr')).data(); //加载页面基本信息 $.ajax({ url: "/AdminUser/AdminUserForm", type: "post", data: rows, success: function (data) { var exp = rows.UR_Icon; //只有在没赋值的情况下，才创建 $("#createModal").html(data); //缩略图赋值 $('#showImage').attr('src', $('#UR_Icon').val()).attr('style', 'width:200px;height:150px'); //弹出框show $("#myModal").modal("show"); //必须先赋值，才能修改缩略图 if (exp == null || typeof (exp) == "undefined" || exp == 0) { //重置添加 modal 里面的 img 的值为 null(去掉图片缩略图) $('#showImage').attr('src', 'UpLoad/image.png'); } } }); });
3.uploadify “ID SWFUpload_0 is already in use. The Flash Object could not be added”错误的解决方法
在使用 uploadify时 遇到同时加载的多个页面中包含uploadify组件时就会出现“ID SWFUpload_0 is already in use. The Flash Object could not be added”的错误，分析代码就会发现，时因为名字累加的问题，解决方法如下，
找到this.movieName，第72行 （jquery.uploadify.js）
this.movieName = "SWFUpload_" + SWFUpload.movieCount++; //不能有效累加导致出现重名现象
修改为随机 this.movieName = "SWFUpload_" +
parseInt(100*Math.random());
注意：同时，<input type="file" name="file_upload" id="uploadify001" />
命名不能相同，这个要注意
4.“编辑”按钮，加载不出图片
解决方案：
参考：
http://www.cnblogs.com/haogj/archive/2013/04/27/3046138.html
http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html
http://www.buyuer.com/javaScript/61.html SWFUpload_0 is already in use. The Flash Object could not be added
