前言 首先声明一下,我这个是对WebUploader开源上传控件的二次封装,底层还是WebUploader实现的,只是为了更简洁的使用他而已. 下面先介绍一下WebUploader 简介: WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+.两套运行时,同样的调用方式…

前言 本篇文章上一篇: 对百度WebUploader开源上传控件的二次封装,精简前端代码(两句代码搞定上传) 此篇是在上面的基础上扩展出来专门上传图片的控件封装. 首先我们看看效果: 正文 使用方式同样很简单,首先创建HTML容器如下: <div id="uploader" class="uploaderPic"> </div> 然后页面加载完成后渲染: $(function () { $("#uploader").pow…

在本人着手开发一个考试系统的过程中,出现了如下一个需求:制作一个倒计时的控件显示在试卷页面上.本文所记录的就是这样的一个过程. 前期工作 对于这个需求,自然我想到的是有没有现成的组件可以直接使用(本着不重复发明轮子的原则).于是我就在 GitHub 上找寻.确实找到了不少,但是与需求之间的差距还比较大.从零开始写又不太现实(时间摆在那里,加之自己的前端也是刚学,还没有从零开始手撸一个控件的能力),所以在已有组件的基础上进行二次封装便成了一个比较可行的方法(几乎也是唯一解).遂在 npm 上以 c…

双核浏览器下在chrome内核中使用uploadify总有302问题,也不知道如何修复,之所以喜欢360浏览器是因为帮客户控制渲染内核: 若页面需默认用极速核,增加标签:<meta name="renderer" content="webkit"/> 若页面需默认用ie兼容内核,增加标签:<meta name="renderer" content="ie-comp"/> 若页面需默认用ie标准内核,增加…

发现百度的Ueditor富文本编辑器中的多图片上传控件很不错,于是便想着分享出来使用,费了老劲,少不了无名朋友的帮助,也查了不少资料,终于搞定了 发代码给大家,请大家多多指正 1.首先要在html页面中添加对ueditor的脚本引用 <script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="../public/ue…

最近项目中需要实现多文件上传功能,于是结合需求最终选择了Uploadify这一款控件来实现.相比其他控件,Uploadify具有简洁的界面,功能API基本可以解决大多数需求,又是基于jquery的,配置起来相对容易.但是不用不知道,一用起来发现坑还是蛮多了,相信大部分用过的人都会遇到,下面就来分享下我的填坑过程: 根据官网文档配置好我所需要的前端配置项,再让后台同事把对应的后台配置搞定后,在chrome下尝试了下一些ok.心想这样就大工告成了?呵呵...那么问题来了. 一.使用Uploadify…

今天遇到一个问题,就是“NeatUpload大文件上传控件而导致Nonfile portion > 4194304 bytes错误”,百度后发现了一个解决方法,跟大家分享下: NeatUpload是一个开源的大文件上传控件,非常的强大,支持文件类型过滤.上传进度条显示.多文件上传等强大的功能. 但部署至项目后,有些地方用普通的FileUpload上传时却发生了一个错误(Nonfile portion > 4194304 bytes,文件大于默认值4M),因如果用NeatUpload控件及需要显…

工作中需要使用百度开发的ueditor,但服务器部署中前端代码和后端代码在不同的域名下,现已解决的前端调后端代码的跨域问题.可是,ueditor中的上传图片flash控件也涉及跨域问题,经过查找发现可以通过在后端域名根目录下增加一个crossdomain.xml文件即可解决上传控件的跨域问题.crossdomain.xml文件内容如下: <?xml version="1.0"?> <!DOCTYPE cross-domain-policy SYSTEM "h…

文件上传是日常开发中经常遇到的,文件上传用的最多的当然是上传控件file了,一个form表单,其中有一点就是form表单的enctype属性设置为multipart/form-data,呵呵,这个在所有关于文件上传的文章中都有提示,长话短说,下面进入正题 对于控件的赋值和取值就不用说了,地球人都知道.但是其中有个上传控件,即类型为file的input,这个东东是个只读的,什么意思呢?简而言之就是可以读取他的value,但是不能直接给他赋值,没错,是不能直接给 他赋值,呵呵,当然有的人干脆说不能给…

今天跟大家分享的是一个依赖于angular的上传控件. 前段时间做项目遇到一个需求是上传文件,大概需要实现的样式是这样子的,见下图: 需要同时上传两个文件.并且规定文件格式和文件大小.因为前端框架使用angular,且不想因为一个上传功能又引入一个jquery,所以在网上查找基于angular的上传控件,因为angular还算比较新,貌似都没有太成熟的插件,网上的教程也大多是复制粘贴,总之没起倒多大的作用...但是皇天不负有心人,最后还是让我遇到了这个功能强大的插件,让我有种相见恨晚的感觉呀,依…