1、使用插件plupload

2、实现效果

3、HTML

1 <li>
2     <div class="default" data-disabled="false"><img src="" class="upImage"></div>
3     <input id="fileStorge2" value="" type="hidden" class="fileStorge">
4     <input type="file" name="" value="" style="display: none;" class="fileUp" id="fileUp2" data-id="2">
5 </li>

4、JS

//点击上传图片
$('body').off('click','.default');
$('body').on('click','.default', function () {var disabled = $(this).attr('data-disabled');if (disabled === "true") {return false;}else{$(this).siblings('.fileUp').trigger('click');}});//图片上传初始化函数
function initImage(){$('.fileUp').each(function(index,ele){var id = $(this).attr('id'),indexNum = $(this).attr('data-id');initUpload(id, indexNum);});}//图片上传
function initUpload(eleID, index) {var uploader = new plupload.Uploader({ //实例化一个plupload上传对象
        browse_button : document.getElementById(eleID),url : 'upload.html', //服务器端的上传页面地址flash_swf_url : 'Moxie.swf',silverlight_xap_url : 'Moxie.xap',multi_selection: false,//是否可以在文件浏览对话框中选择多个文件
        filters: {mime_types : [ //只允许上传图片文件{ title : "图片文件", extensions : "jpg,gif,png" }]}});uploader.init(); //初始化//绑定文件添加进队列事件uploader.bind('FilesAdded',function(uploader,files){for(var i = 0, len = files.length; i<len; i++){!function(i){previewImage(files[i],function(imgsrc){$('#'+eleID+'').siblings('.default').find('img').attr('src',imgsrc).show();$('#fileStorge'+index).val(encodeURIComponent(imgsrc));});}(i);}});}//图片上传预览
function previewImage(file,callback){ if(file.type=='image/gif'){ //gif使用FileReader进行预览,因为mOxie.Image只支持jpg和pngvar fr = new mOxie.FileReader();fr.onload = function(){callback(fr.result);}fr.readAsDataURL(file.getSource());}else{var preloader = new mOxie.Image();preloader.onload = function() {preloader.downsize( 300, 300 );//先压缩一下要预览的图片,宽300,高300var imgsrc = preloader.type=='image/jpeg' ? preloader.getAsDataURL('image/jpeg',80) : preloader.getAsDataURL(); //得到图片src,实质为一个base64编码的数据callback && callback(imgsrc); //callback传入的参数为预览图片的url
        };preloader.load( file.getSource() );}
}

转载于:https://www.cnblogs.com/zhanghuiyun/p/6709596.html

图片异步上传,使用ajax上传图片相关推荐

  1. ajax 批量上传图片插件,TinyMCE多图片批量上传(Ajax)教程

    需要用上插件:axupimgs 插件作者:莫若卿 支持版本:5.0.4+ 支持语言:仅中文 插件版本:1.6 一.axupimgs 插件作用: 这是一个tinymce多图片批量上传插件,支持拖拽文件添 ...

  2. jq php异步上传图片,PHP+Ajax实现图片异步上传预览

    说道上传图片,大家并不陌生,不过,在以后开发的项目中,可能并不会让你使用提交刷新页面式的上传图片,比如上传头像,按照常理,肯定是在相册选择照片之后,确认上传,而肯定不会通过form表单,点击submi ...

  3. html5 XMLHttpRequest 图片异步上传

    2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPE html> <html> <head> <meta charse ...

  4. jq ajax异步上传图片插件,jQuery异步上传文件插件ajaxFileUpload详细介绍

    一.ajaxFileUpload是一个异步上传文件的jQuery插件. 传一个不知道什么版本的上来,以后不用到处找了. 语法:$.ajaxFileUpload([options]) options参数 ...

  5. html5 上传图片模板,HTML5实现图片文件异步上传

    ,过现前个能文使近记接的端问对字用近记接 利用HTML5的新特点做文件异步上传非常简单方便,本文主要展示JS部分,html结构.下面的代码并未使用第三发库,如果有参照,请注意一些未展现出来的代码片段. ...

  6. php上传图文,php+ajax实现异步上传图文功能详解

    这篇文章主要为大家详细介绍了php+ajax实现异步上传文件或图片功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文为大家分享了ajax异步上传文件或图片功能的具体代码,供大家参考,具体内容 ...

  7. html访问手机相册,使用HTML5的FileReader读取手机图片(还可选择拍照), 并自动异步上传到服务器上...

    使用html5 FileReader获取图片,并异步上传到服务器(not iframe) body{margin: 0px; background:#f2f2f0;} p{margin:0px;} . ...

  8. ajax异步上传什么意思,使用 jQuery 的 AJAX 异步上传文件

    现在基本上很多网页里面都在使用 jQuery,要实现文件的异步上传,大多数的解决方法都是使用 jQuery 插件,如果你只是上传一张图片,使用插件反而觉得多余了,其实 jQuery 的 ajax() ...

  9. 原生态的ajax如何上传文件,原生ajax和iframe框架实现图片文件上传的两种方式

    大家应该可以举出几种常用的异步文件上传功能的实现方式,使用频率较多的有原生ajax和iframe框架,实现图片文件上传,下面就为大家分享图片文件上传的两种方式:原生ajax和iframe框架,供大家参 ...

最新文章

  1. sklearn——CountVectorizer详解
  2. [python,2018-06-29] 37%法则及其拓展解决恋爱问题
  3. html语言右对齐,在HTML中右对齐块元素
  4. c语言两个浮点数相加_C语言中两个浮点数或双精度数的模数
  5. 用jquery给Struts2的s:radio /标签添加change事件
  6. 【python】conda配置python项目环境(Conda常用命令)
  7. cruise软件模型,混动仿真模型,IMMD架构混联混动仿真模型
  8. android手机计步器开发,超精准的Android手机计步器开发
  9. Autoware 矢量地图标注(Autoware Maptool插件)
  10. 3624用计算机怎么换算,pa与mpa的换算(压力单位pa与mpa)
  11. 专利分析的方法和流程
  12. JS简单总结(前端ES6和JQ)
  13. 计算机考研 东华大学,2017考研:计算机科学与技术专业考研院校推荐之东华大学...
  14. ST7703 LCM显示屏调试--基于MT6765
  15. python geany是什么_Geany
  16. 【微信篇】PC端微信文件夹里的“微信号“
  17. 【优化】--Squid优化汇总
  18. 高德地图——关键字检索POI
  19. 【bean的生命周期】--- BeanDefinition和BeanFactoryPostProcessor简介
  20. Epub电子书阅读软件-IOS软件开发团队

热门文章

  1. 防篡改对象之密封对象
  2. uni-app微信小程序获取手机号;微信小程序获取手机号,获取到后需要进行解密;微信小程序获取手机号失败 Error:该appId没有权限
  3. uniapp使用iconfont字体图标
  4. 脚本中判断Shell命令执行结果
  5. [react] 在构造函数中调用super(props)的目的是什么?
  6. [react] React16新特性有哪些?
  7. [react] 说说你对React的渲染原理的理解
  8. 小程序学习(2):vs code 安装插件
  9. 前端学习(3163):react-hello-react之组件化编码
  10. 前端学习(3124):react-hello-react之批量传递props