[Asp.net]Uploadify所有配置说明,常见bug问题分析
2014-02-24 21:13
573 查看
引言
之前写过一篇使用swfupload上传图片的文章:周末大放送网站图片上传,水印,预览,截图,这里分析一下,当时使用uploadify上传,无法获取上传后,图片路径的问题。当时没有测试没有成功,一直憋在心里有点难受,有点完美强迫症了。项目结构
测试
相关配置说明,已在代码中注释说明,文章结束出提供代码下载。<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Wolfy.UploadifyDemo.Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <%-- 首先引入相关的css,js文件 --%> <link href="Uploadify/css/uploadify.css" rel="stylesheet" /> <script src="Uploadify/js/jquery-1.10.2.min.js"></script> <script src="Uploadify/js/uploadify3.2.1/jquery.uploadify.min.js"></script> </head> <body> <form id="form1" runat="server"> <div class="divMain"> <div id="fileQueue"> </div> <input type="file" name="uploadify" id="file_upload" /> <div id="haveupfile"> </div> <div> <div> <a href="javascript:$('#file_upload').uploadify('cancel','*');">取消上传(将触发onClearQueue事件)</a> </div> <div> <a href="javascript:$('#file_upload').uploadify('destroy')">销毁(将调用Destroy)</a> </div> <div> <a href="javascript:$('#file_upload').uploadify('disable', true);">禁用上传功能</a> </div> <div> <a href="javascript:$('#file_upload').uploadify('disable', false);">启用上传功能</a> </div> <p>uploadify中的方法</p> <div> <a href="javascript:$('#file_upload').uploadify('cancel')">取消队列中第一个文件</a> | <a href="javascript:$('#file_upload').uploadify('cancel', '*')">取消队列中所有文件</a> | <a href="javascript:$('#file_upload').uploadify('upload', '*')">开始上传队列中所有文件</a> </div> <div> <a href="javascript:$('#file_upload').uploadify('destroy')">销毁Uploadify实例</a> </div> <div> <a href="javascript:$('#file_upload').uploadify('disable', true)">禁用选择按钮</a> | <a href="javascript:$('#file_upload').uploadify('disable', false)">启用选择按钮</a> </div> <div> <a href="javascript:changeBtnText()">改变按钮上面的文字</a> | <a href="javascript:returnBtnText();">读取按钮上面的文字</a> </div> <div> <a href="javascript:$('#file_upload').uploadify('upload', '*')">开始上传</a> | <a href="javascript:$('#file_upload').uploadify('stop')">停止上传</a> </div> </div> </div> </form> </body> </html> <script type="text/javascript"> $(function () { $('#file_upload').uploadify({ 'auto': false, //选择文件后是否自动上传,默认为true 'buttonClass': 'some-class', //'buttonImage': 'Uploadify/icon/btn.png',//选择文件按钮 'buttonText': '浏 览',//设置按钮文本 //'debug': true,//是否打开调试模式,默认为false 'fileSizeLimit': '5000KB',//单个文件大小,0为无限制,可接受KB,MB,GB等单位的字符串值 'fileTypeDesc': 'Image Files',//文件描述 'fileTypeExts': '*.gif; *.jpg; *.png',//允许上传的文件类型 //'formData': { 'someKey': 'someValue', 'someOtherKey': 1 },//传参数 //'height': 50,//按钮的高度 //'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>',//队列中的每个项目一个特殊的HTML模板 //'method': 'post',//请求方式"get"或者"post",默认为"post" //'multi': false,//是否允许同时选择多个文件,默认为true //'overrideEvents': ['onUploadError'],//不执行某个默认事件如:onUploadError上传失败事件 //'preventCaching': false,//是否取消缓存,默认为true没有缓存 //'progressData': 'speed',//上传进度条显示,'percentage'or'speed'默认为'percentage' 'queueID': 'fileQueue',//队列的ID,一个存放上传文件div的ID //'queueSizeLimit':1,//可同事选择上传文件的数量,默认为999 //'removeCompleted': false,//是否移除在队列中上传完成的文件,默认为true //'removeTimeout': 10,//在队列中上传完成延迟多少秒移除,默认为3秒 //'requeueErrors': true,//上传失败是否重新上传,默认为false //'successTimeout': 5,//上传成功之后等待响应时间swf成功,默认为30秒 'swf': 'Uploadify/js/uploadify3.2.1/uploadify.swf',//FLash文件路径 'uploader': '/UploadHander.ashx',//上传文件处理后台页面 //'uploadLimit': 1,//允许上传最大文件数,超过onUploadError事件被触发,默认999 //'width': 300,//按钮宽度 /**********************************************事件***********************************************************************/ //'onCancel': function (file) {//取消单个文件上传触发 // alert('The file ' + file.name + ' was cancelled.') //}, //'onClearQueue': function (queueItemCount) {//取消队列中所用上传文件触发 // alert(queueItemCount + ' file(s) were removed from the queue'); //}, //'onDestroy': function () {//销毁触发 // alert('I am getting destroyed!'); //}, //'onDialogClose': function (queueData) {//关闭窗口时触发 // //queueData属性如下 // //filesSelected:在浏览文件对话框中选择文件的数量 // //filesQueued:添加到队列中文件的数量(即没有返回错误) // //filesReplaced:在队列中替换的文件数 // //filesCancelled:文件已被添加到队列中取消数(不更换) // //filesErrored:返回错误的文件数 // alert(queueData.filesQueued + ' files were queued of ' + queueData.filesSelected + ' selected files. There are ' + queueData.queueLength + ' total files in the queue.'); //}, //'onDialogOpen': function () {//打开对话框时触发 //}, //'onDisable': function () {//禁用上传功能触发 // alert('You have disabled Uploadify!'); //}, //'onEnable': function () {//启用上传功能触发 // alert('You can use Uploadify again.'); //}, 'onFallback': function () {//初始化浏览器不兼容触发 也可监视浏览器是否禁用flash播放插件 alert('Flash was not detected.'); }, //'onInit': function (instance) {//初始化时触发 // alert('The queue ID is ' + instance.settings.queueID); //}, //'onQueueComplete': function (queueData) {//队列中所有文件处理完成触发 // //queueData属性如下 // //uploadsSuccessful:上传的文件数量已顺利完成 // //uploadsErrored:传回错误的上传数量 // alert(queueData.uploadsSuccessful + ' files were successfully uploaded.'); //}, //'onSelect': function (file) {//选择文件时触发 // alert('The file ' + file.name + ' was added to the queue.'); //}, //'onSelectError': function () {//选择文件出现错误时触发,如超出文件大小设置 // //返回file // //返回errorCode // //返回errorMsg // //alert(errorCode); // //alert('The file ' + file.name + ' returned an error and was not added to the queue.'); //}, //'onSWFReady': function () {//当Flash对象加载触发。 // alert('The Flash file is ready to go.'); //}, //'onUploadComplete': function (file) {//当上传完成后是否成功,或返回错误为每个文件触发一次 // alert('The file ' + file.name + ' finished processing.'); //}, //'onUploadError': function (file, errorCode, errorMsg, errorString) {//上传文件失败时触发 // alert('The file ' + file.name + ' could not be uploaded: ' + errorString); //}, //'onUploadProgress': function (file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {//上传进度数据 // $('#progress').html(totalBytesUploaded + ' bytes uploaded of ' + totalBytesTotal + ' bytes.'); //}, //'onUploadStart': function (file) {//开始上传触发 // alert('Starting to upload ' + file.name); //}, //'onUploadSuccess': function (file, data, response) {//上传成功后触发,每个文件都触发 // alert('The file ' + file.name + ' was successfully uploaded with a response of ' + response + ':' + data); //} }); }); function changeBtnText() { $('#file_upload').uploadify('settings', 'buttonText', 'BROWSE'); } function returnBtnText() { alert('The button says ' + $('#file_upload').uploadify('settings', 'buttonText')); } </script>
IE9中兼容性视图模式浏览
然后单击开始上传,会报如下错误:
那么,如何解决这个问题呢?首先想到的就是兼容性的问题,经测试在IE8,IE9(9)下是正常的,IE7和IE9兼容性视图下不行。
如果在IE9下,禁用flashplayer就会出现上述的错误:
如果禁用flash object,在ie9下刷新,会触发uploadify的onFallback事件:
然后单击上传,出现
可见uploadify上传文件跟客户端浏览器是否禁用flash有关。在ie7下,测试有的电脑上可以,有的不可以,猜想是否跟flash版本有关?让人很无语。
ie7下可采用这种设置:
将uploadify的onUploadSuccess事件取消注释,上传图片:
处理上传图片的一般处理程序:
using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Web; namespace Wolfy.UploadifyDemo { /// <summary> /// UploadHander 的摘要说明 /// </summary> public class UploadHander : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; HttpPostedFile file = context.Request.Files["Filedata"]; string uploadPath = context.Request.MapPath("/UploadFile/"); if (file != null) { //新文件名 string filename = DateTime.Now.ToString("yyyyMMddhhmmss") + "_" + Path.GetFileName(file.FileName); file.SaveAs(uploadPath + filename); context.Response.Write("/UploadFile/" + filename); } else { context.Response.Write("0"); } } public bool IsReusable { get { return false; } } } }
总结
将uploadify常用到的配置信息,总结在一个页面中,用到哪个就将哪个的注释去掉就可以了,不用再去百度或google了。如果能帮到你,不妨推荐一下!代码下载,猛戳这里:http://pan.baidu.com/s/1ntv20Dr
相关文章推荐
- Uploadify所有配置说明,常见bug问题分析
- iis配置asp.net常见问题解决方案
- iis配置asp.net常见问题解决方案
- iis配置asp.net常见问题解决方案
- iis配置asp.net常见验证失败问题解决方案
- CKEditor和CKFind 使用配置 常见配置问题的解决办法 CKEditor Demo(Asp.net)
- Asp.net core应用在 Kubernetes上内存使用率过高问题分析
- 阿里云上从ASP.NET线程角度对“黑色30秒”问题的全新分析
- [ASP.NET]NTKO插件使用常见问题
- 在ASP.NET中使用Session常见问题集锦
- 【原创】Jlink在ADS下的配置说明及常见问题解决办法
- 在ASP.NET环境的安装和配置遇到的一些问题的解决。
- asp.net部署到IIS常见问题的解决方法
- ASP.NET常见问题
- asp.net开发与web标准的冲突问题的一些常见解决方法
- ASP.NET AJAX(Atlas)现存的一些常见问题以及解决方案
- 在ASP.NET中使用Session常见问题集锦
- 在ASP.NET中使用Session常见问题集锦
- asp.net web.config配置节说明
- ASP.NET Aries DataGrid 配置表头说明文档