上传预览图片的插件jquery-fileupload

github地址:https://github.com/blueimp/jQuery-File-Upload

中文文档:http://www.jq22.com/jquery-info230

步骤

  1. 引包

<!-- jquery ui小部件,上传插件依赖了jquery ui的小部件 -->
<script src="js/vendor/jquery.ui.widget.js"></script>
<!-- 如果上传图片需要跨域,那么需要引入这个js文件,如果不跨域,则不需要引入 -->
<script src="js/jquery.iframe-transport.js"></script>
<!-- jquery上传插件 -->
<script src="js/jquery.fileupload.js"></script>
  1. html结构如下

<!-- name指定图片上传时的name属性 -->
<!-- data-url指定图片上传时的路径 -->
<!-- multiple指定多文件上传 -->
<input id="fileupload" type="file" name="files" data-url="server/php/" multiple>
  1. js代码

$("#fileupload").fileupload({
dataType:"json",
//e:事件对象
//data:图片上传后的对象,通过e.result.picAddr可以获取上传后的图片地址
done:function (e, data) {
console.log(data);
}
});

上传预览图片的插件jquery-fileupload的更多相关文章

  1. 异步上传&预览图片-不压缩图片

    本例使用ajaxFileUpload异步上传预览图片 <bean id="multipartResolver" class="org.springframework ...

  2. 微信开发中使用微信JSSDK和使用URL.createObjectURL上传预览图片的不同处理对比

    在做微信公众号或者企业微信开发业务应用的时候,我们常常会涉及到图片预览.上传等的处理,往往业务需求不止一张图片,因此相对来说,需要考虑的全面一些,用户还需要对图片进行预览和相应的处理,在开始的时候我使 ...

  3. 上传预览图片自己做的.md

    1.无插件预览(window.URL.createObjectURL) ```javascript //demo 图片预览  单个 $(".demo input#demo_file" ...

  4. 异步上传&预览图片-压缩图片

    移动端普及的时代,流量是用户最关心的,手机拍出来的照片基本上都在1~2M以上,这样上传会非常耗流量,影响用户体验,此例能在保证清晰度的情况下,将4.5M的图片压缩为30K <!DOCTYPE h ...

  5. html 上传预览图片

    直接上代码了 <!DOCTYPE html> <html><head lang="en"><meta http-equiv="C ...

  6. javascript 上传 预览图片 兼容 谷歌 ie

    最近的项目要用到这块,但是在网上找了很多资料,很多都是假的,都不行,最后终于找到一个,还是可以兼容主流的,特分享给大家,可以用 <!DOCTYPE html PUBLIC "-//W3 ...

  7. Vue 中使用 viewerjs进行本地上传预览图片

    https://www.cnblogs.com/shenjp/p/9754171.html 如果图片路径是 接口的返回信息的话,将路径存储在数组中,在this.$nextTick中实例化Viewer: ...

  8. html 图片上传预览

    Html5 upload img 2012年12月27日 20:36 <!DOCTYPE HTML> <html> <head> <meta http-equ ...

  9. jQuery插件ImgAreaSelect 实例讲解一(头像上传预览和裁剪功能)

    上一节随笔中,我们已经知道了关于jQuery插件ImgAreaSelect基本的知识:那么现在看一下实例: 首先,要知道我们应该实现什么功能? (1)图片能够实现上传预览功能 (2)拖拽裁剪图片,使其 ...

随机推荐

  1. 阅读《JavaScript设计模式》第三章心得

    简单工厂模式 1.通过类实例化对象创建 传统的用面向对象方法去创建很多类去实现某些功能不妥当,这样不仅占用的很多类名称,而且别人使用这些方法的同时要记住每个类的名字,所以这样不适合团队开发,所以我们可 ...

  2. elasticsearch学习(1)简单查询与聚合

    elastic 被用作全文搜索.结构化搜索.分析以及这三个功能的组合 一个ElasticSearch集群可以包含多个索引, 每个索引包含多个类型 一个类型存储着多个文档 每个文档又有多个属性 索引(名 ...

  3. ACM蓝桥杯之换硬币问题

    题目描述: 想兑换100元零钱,有1元.2元.5元.10元四种面值,总有多少种兑换方法? 解题思路: 本题可以采用多种方法求解.最容易理解的应该就是暴力穷举和递归求解.那么本文主要介绍这两种解法. 暴 ...

  4. JAVA经典题--计算一个字符串中每个字符出现的次数

    需求:  计算一个字符串中每个字符出现的次数 思路: 通过toCharArray()拿到一个字符数组--> 遍历数组,将数组元素作为key,数值1作为value存入map容器--> 如果k ...

  5. Python 1 初识python

    1.Python介绍 Python是一种高级语言,与JAVA C# 等同.可以编写各种应用程序,每种语言都有其合适的应用场景.而Python 的优势在于更加人性化.简便的语法规则,以及针对各种具体场景 ...

  6. http协议的再次理解

    1.Tomcat是根据server.xml的配置启动的.根目录下conf/server.xml. 2.Tomcat是根据server.xml的配置启动的.根目录下conf/server.xml. 3. ...

  7. &lt;LeetCode OJ&gt; 268. Missing Number

    268. Missing Number Total Accepted: 31740 Total Submissions: 83547 Difficulty: Medium Given an array ...

  8. Atitit.一个cms有多少少扩展点,多少api&#160;wordpress&#160;&#160;cms有多少api。。扩展点

    Atitit.一个cms有多少少扩展点,多少api wordpress  cms有多少api. . 扩展点 1. Api分类 WordPress APIs 1 1.1. 1 函数分类 2 1.2. 函 ...

  9. 源代码管理之Git命令的使用

    目录 02.源代码管理之Git命令的使用 2.Git命令行演练-个人开发 2.1 如何学习git指令 2.2 初始化创建本地仓库 2.3 个人开发基本演练 2.4 Git的基本常识 3.Git命令行演 ...

  10. B1208 [HNOI2004]宠物收养所 平衡树||set (滑稽)

    这个题是一道splay裸题,但是我不太会写,所以用set直接水过去!!!哈哈哈哈,美滋滋. set总结: set是一个集合,然后里面没用重复的元素.里面有一些函数: begin()     ,返回se ...