文档章节

利用uploadify进行ajax方式进行文件上传

二两豆腐
 二两豆腐
发布于 2015/11/24 14:52
字数 453
阅读 8
收藏 0

 uploadify插件是一个前台功能提供的一个比较强大的插件,它基于jquery,能通过ajax进行上传,在上传的过程中可以显示进度条,可以前台对文件大小,文件的格式等等进行校验,也能够展现一些比较绚丽的画面。具体详细可以查看官方的demo

1、官方地址:http://www.uploadify.com/

2、下载此js插件,然后把uploadify插件引入到项目中

 <script src="<c:url value="/js/uploadify/swfobject.js"/>" type="text/javascript" charset="utf-8"></script>     <script src="<c:url value="/js/uploadify/jquery.uploadify.v2.1.0.js"/>" type="text/javascript"              charset="utf-8"> </script>

3、定义file控件

 

 <input type="file" id="frontfile" name="frontfile" />

4、设置上传事件

 

 $(function (){         $("#backfile").uploadify({             'uploader': '/js/uploadify/uploadify.swf?v='+new Date(),             'script': 'file_idRegisterUpbackfile.action;jsessionid=<%=session.getId()%>',             'fileDataName': 'backfile', //此处是定义上传控件的id            'cancelImg': 'js/jquery.uploadify-v2.1.0/cancel.png',             'folder': 'UploadFile',             'auto': true,             'buttonImg' : '/images/diyclaim/liulan_e.jpg',             'height' : 25,             'width' : 66,             'fileDesc':'支持图片格式:jpg,jpeg', //点击上传,文件选择框中显示的文字            'fileExt':'*.jpg;*.jpeg',             'sizeLimit':2*1024*1024,             'onError' : function(event, queueID, fileObj,errorObj){                 if(errorObj.type=='File Size')                         errorObj.type='文件大小';                    alert("图片:" + fileObj.name + " 上传失败。错误信息:"+errorObj.type+" 异常");                },            'onComplete': function (event, queueID, fileObj, response, data){                         //这里面是回掉函数                         var jsonData;                         try{                             jsonData=eval('(' + response + ')');                          }catch(e){                         }                         showImage(jsonData.oldfileNameAndPath);//得到后台返回来的字符串                                                          }         });     });

以上是对此控件的粗略使用,

另外使用jquery.lightbox可以实现其他的比较绚的功能,例如可以展示一个图片的缩略图,然后鼠标点击以后可以在弹出层中看大图,然后通过拖动里面的条,可以把图片放大或者缩小等等,还请亲们自行研究。详细可见官方文档。

本文出自 “走在未来的路上” 博客,请务必保留此出处http://wtf0313.blog.51cto.com/1093061/1187013

© 著作权归作者所有

共有 人打赏支持
二两豆腐
粉丝 21
博文 95
码字总数 79432
作品 0
朝阳
高级程序员
私信 提问
一些文件上传组件(Flash,JQuery,asp,php,js,AJAX)

FancyUpload FancyUpload是一个采用Flash与Ajax(MooTools)技术实现包含上传进度条的多文件上传组件,类似于SWFUpload。 FancyUpload Mootools jqUploader 结合Javascript与Flash开发,拥有...

老朱教授
2017/10/01
0
0
多种上传图片的方法

tags: 图片上传, multipart, 截图上传, file对象, FormData, 拖拽上传图片, dataTransfer, readAsDataURL 一个如下所示的发布框,经常会出现在各种微博、社区、论坛站点上,这类发布形式虽然...

筱飞
2016/06/07
74
0
7 款 JavaScript 的 Ajax 文件上传插件

jQuery File Upload jQuery File Upload 是一个Jquery图片上传组件,支持多文件上传、取消、删除,上传前缩略图预览、列表显示图片大小,支持上传进度条显示;支持各种动态语言开发的服务器端...

oschina
2012/05/09
26K
13
基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用

大概一年前,我还在用Asp.NET开发一些行业管理系统的时候,就曾经使用这个组件作为文件的上传操作,在随笔《Web开发中的文件上传组件uploadify的使用》中可以看到,Asp.NET中如何使用这个组件...

walb呀
2017/12/04
0
0
jquery文件上传控件 Uploadify

jquery文件上传控件 Uploadify 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,删除已上传文件。 要求使用jquery1.4或以上版本,flash player 9.0.24...

蜗牛奔跑
2015/07/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

nacos之springboot

本地操作系统:ubuntu18,我使用docker的方式启动nacos服务 docker image方式启动nacos 在docker hub上可以搜到nacos-server List-1.1 拉去最新的版本 mjduan@mjduan-ubuntu:/opt/software$ ...

克虏伯
32分钟前
2
0
指针数组和数组指针的区别

这两个名字不同当然所代表的意思也就不同。我刚开始看到这就吓到了,主要是中文太博大精深了,整这样的简称太专业了,把人都绕晕了。从英文解释或中文全称看就比较容易理解。 指针数组:arr...

天王盖地虎626
今天
3
0
Qt那些事0.0.18

今天要记一下Qt中的Resource。自我感觉理解的不错,但是还会难免有谬误,在日后有可能会更新,也有可能不会。 小声的念叨一句,女人心,海底针。 今天就直接跳过了关于QML在qrc文件中的介绍,...

Ev4n
今天
2
0
深入解析js的作用域、预解析机制

虽然,ES6在我们工作中应用得越来越广泛,但是还是很多项目保留着ES5的写法,所以,今天,带着大家重新巩固下ES5下的作用域及预解析机制。 概念: 作用域:域,指的是一个空间、范围、区域,...

前端攻城老湿
今天
2
0
Spring Cloud Feign - 声明式 REST Client

1、Feign是什么 声明式REST client,来自NetFlix。 允许你编写无实现代码调用REST services 替换RestTemplate(甚至更简单) Spring Cloud 为使用Feign提供了包装器 2、怎样使用Feign 对比:...

Benz001
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部