基于框架插件上传实现实时显示进度条上传图片

先了解了解上传，具体内容如下

上传是一个简单易用的多文件上传方案。作为一个框架插件，上传使用简单，并具有高度的定制性。

上传特性：

上传简单说来，是基于框架的一款文件上传插件。它的功能特色总结如下：

1)、支持单文件或多文件上传，可控制并发上传的文件数2)、在服务器端支持各种语言与之配合使用，诸如PHP，2000 . NET、Java……)3、通过参数可配置上传文件类型及大小限制4)、通过参数可配置是否选择文件后自动上传5)、易于扩展，可控制每一步骤的回调函数(onSelect，onCancel……)6)、通过接口参数和半铸钢钢性铸铁(铸造半钢)控制外观7)、提供上传进度的事件回调，实时显示上传进度8)、开始之前要先下载插件安装包到本地并引用，详细实现请看代码注释，下面开始代码。

1、html代码

div id=' WebAppLogo _ file ' style=' display : '块；宽度： 800像素；背景-color : # fff；ul li style='边距-左侧： 213 pxspan class='black_blod14'LOGO图标：/span/Li Li style=' margin-left : 3px；'输入类型=' text ' readonly=' readonly ' id=' text _ webApplogo ' name=' app _ logo ' class=' appipt 1 ' value=' %=applogo % '//Li Li style=' padding-top 3360 1px；'输入类型=' file ' id=' webApplogo ' name=' webApplogo '/Li Li lispan style=' display : none；左边距左： 5px左填充left : 20pxcolor : # ea 5200 font-size : 12px；背景： URL(' Images/icon _ 03。gif’)无重复0px 0pxid='textporApplogo '请上传标志；徽标图标！/span/li li style='边距-左侧： 220 pxspan class=' grey 999 ' style=' margin-left : 90px；'左侧浮动：'尺寸72px*72px，png格式，建议使用图标（同装运前文件)出货档案模板制作/span div id=' QID _ webApplogo ' class='文件队列'/div表id=' webApplogo _ tab ' width=' 50% '边框=' 0 '单元格间距=' 0 '单元格填充=' 0 ' align=' center ' class=' grey 999 ' style=' display 3360 none；左边距左侧： 90px '左侧浮动：tr TD align=' center ' valign=' bottom ' img style=' width : 64px；height : 64px ' id=' img _ 64 ' src=' http : images/icon _ 02。gif ' border=' 0 '/br/(64 * 64)/TD TD align=' center ' valign=' bottom ' img style=' width : 48px；'高度' : 48px'id=' img _ 48 ' src=' http : images/icon _ 02。gif ' border=' 0 '/br/(48 * 48)/TD TD align=' center ' valign=' bottom ' img style=' width : 32px；'height : 32px ' id=' img _ 32 ' src=' http : images/icon _ 02。gif ' border=' 0 '/br/(32 * 32)/TD align=' center ' valgn=' bottom ' img style=' width : 16px；'height : 16px ' id=' img _ 16 ' src=' http : images/icon _ 02。gif ' border=' 0 '/br/(16 * 16)/TD/tr/table/Li/ul/div 2、Javascript代码（关键部分)

$ ('# webapplogo ')。Uploadify({ ' uploader ' : ' js/uploadify-v 2 . 1 . 4/uploadify . swf '，//进度条，uploadify包含' script ' : ' uploadapplogo.ashx '，//通用处理程序' cancel mg ' : ' js/uploadify-v 2 . 1 . 4/cancel . png '，//取消图片路径' folder': 'Imagelogo '，//上传文件夹名称' auto ' :默认值为false 'multi': false，//。//是否允许多文件上传。默认值为false“文件扩展名”: *。gif*.jpg*.jpeg*.允许上传的png '，//文件类型，使用分号(")；)”拆分为例如：*。jpg*.gif，默认值为null(所有文件类型)。长度不超过2M (*)的图片。gif*.jpg*.png)'，' sizelimit' : 2048000，//允许的文件大小(kb)为2m' on select once' :函数(事件，数据){//当上传单个文件或多个文件时，在选择文件时触发//event对象//数据选择的操作信息//在data.filesselected操作中选择的文件数$ ('# status-message ')。text (data.filesselected '文件正在等待上载.');}、“on complete”:函数(事件、queueID、fileObj、响应、数据){//单个文件上传时触发//event:事件对象)//ID:文件队列中文件的唯一表示//fileObj:所选文件的对象及其包含的属性列表//Response:服务器返回的响应文本。我在这里返回处理后的文件名。//数据：文件上传预警的文件队列详细信息和一般数据(' file :' fileObj.name '上传成功！');//设置图片名称$ ('# applogo ')。attr('值'，响应)；//设置输入框$ ('# text _ webapplogo ')的值。attr ('value '，file obj . name)；//设置图像路径$ ('# img _ 64 ')。attr ('src '，' imagelogo/64 _ '响应)；$('#img_48 ')。attr('src '，' Imagelogo/48_ '响应)；$('#img_32 ')。attr('src '，' Imagelogo/32_ '响应)；$('#img_16 ')。attr('src '，' Imagelogo/16_ '响应)；//设置图片路径后，显示图片$ ('# webapplogo _ tab ')。CSS('显示'，'块')；}、“on error”:函数(事件、队列id、file obj){//在上载单个文件时出现错误时触发警报(' file 3360' fileobj.name '上载失败！');}、“buttonimg”:“images/bn _ 04 . gif”、//浏览按钮的图片路径“width”:60、//浏览按钮的宽度和高度“height”:24、“queue id”:“qid _ web app logo”//page。3.服务器处理文件上传。

///摘要///上传文件////摘要公共类UploadApplogo : IHttpHandler { System .绘图。图像图像，图像64,图像48,图像32,图像16;//定义图像类的对象受保护的字符串imagePath//图片路径受保护的字符串imageType//图片类型受保护的字符串imageName//图片名称受保护的字符串fileName//图片名称//提供一个回调方法，用于确定图像对象在执行生成缩略图操作时何时提前取消执行//如果此方法确定getthumbnaillimage方法应提前停止执行，则返回真的；否则返回假系统绘图。图像。getthumbnailimageabort callb=null；公共无效进程请求(HttpContext上下文){上下文.响应。内容类型='文本/纯文本；HttpPostedFile UploadImage=上下文。请求文件['文件数据'];//物理路径字符串uploadpath=HttpContext .当前服务器。映射路径（上下文。请求['文件夹']' \ \ ');if (UploadImage！=null) { //是否有目录，如没有就创建if(！目录。存在（上传路径)){目录创建目录(upload path)；} //客户端文件完全名称字符串文件名=上传图像。文件名；字符串extname=文件名。子字符串（文件名. LastIndexOf(' . ') 1);//为不重复，设置文件名文件名=Guid .NewGuid().ToString()" "extname//上下文。回应。写下(' 1 ');语境。响应。写入（文件名);} else { context .响应。写入(' 0 ');}字符串mPathimagePath=UploadImage .文件名；//取得图片类型imageType=imagePath .子字符串(图像路径.LastIndexOf(' . ') 1);//取得图片名称imageName=imagePath .子字符串(图像路径.的最后一个索引(' \ \ ')1)；Stream imgStream=UploadImage .InputStream//流文件，准备读取上载文件的内容int imgLen=UploadImage .ContentLength//上载文件大小//建立虚拟路径mPath=HttpContext .当前服务器。映射路径（上下文。请求['文件夹']);//保存到虚拟路径上传图像。另存为(mPath '\\ '文件名);////显示原图//imageSource .ImageUrl=' upFile/' imageName；//为上传的图片建立引用图像=系统。绘图。形象。FromFile(mPath '\\ '文件名);//生成缩略图image64=图像GetThumbnailImage(64，64，callb，新系统. int ptr())；//把缩略图保存到指定的虚拟路径图64。保存(HttpContext .当前服务器。映射路径（上下文。请求['文件夹])' \ \ 64 _ ' FIlename)；//释放图像64对象的资源图64。dispose()；//生成缩略图image48=图像GetThumbnailImage(48，48，callb，新系统. int ptr())；图48。保存(HttpContext .当前服务器。映射路径（上下文。请求['文件夹])' \ \ 48 _ ' FIlename)；图48。dispose()；//生成缩略图image32=图像GetThumbnailImage(32，32，callb，新系统. int ptr())；图32。保存(HttpContext .当前服务器。映射路径（上下文。请求['文件夹])' \ \ 32 _ ' FIlename)；图32。dispose()；//生成缩略图image16=图像GetThumbnailImage(16，16，callb，新系统. int ptr())；图16。保存(HttpContext .当前服务器。映射路径（上下文。请求['文件夹])' \ \ 16 _ ' FIlename)；图16。dispose()；//释放图像对象占用的资源图像dispose()；} public bool IsReuse { get { return false；} } }4、效果如下

更多精彩内容，请点击《jQuery上传操作汇总》 ,进行深入学习和研究。

以上就是本文的全部内容，希望对大家的学习有所帮助。