上传预览图片的插件jquery-fileupload
上传预览图片的插件jquery-fileupload
github地址:https://github.com/blueimp/jQuery-File-Upload
中文文档:http://www.jq22.com/jquery-info230
步骤
- 引包
<!-- 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>
- html结构如下
<!-- name指定图片上传时的name属性 -->
<!-- data-url指定图片上传时的路径 -->
<!-- multiple指定多文件上传 -->
<input id="fileupload" type="file" name="files" data-url="server/php/" multiple>
- js代码
$("#fileupload").fileupload({
dataType:"json",
//e:事件对象
//data:图片上传后的对象,通过e.result.picAddr可以获取上传后的图片地址
done:function (e, data) {
console.log(data);
}
});
上传预览图片的插件jquery-fileupload的更多相关文章
- 异步上传&预览图片-不压缩图片
本例使用ajaxFileUpload异步上传预览图片 <bean id="multipartResolver" class="org.springframework ...
- 微信开发中使用微信JSSDK和使用URL.createObjectURL上传预览图片的不同处理对比
在做微信公众号或者企业微信开发业务应用的时候,我们常常会涉及到图片预览.上传等的处理,往往业务需求不止一张图片,因此相对来说,需要考虑的全面一些,用户还需要对图片进行预览和相应的处理,在开始的时候我使 ...
- 上传预览图片自己做的.md
1.无插件预览(window.URL.createObjectURL) ```javascript //demo 图片预览 单个 $(".demo input#demo_file" ...
- 异步上传&预览图片-压缩图片
移动端普及的时代,流量是用户最关心的,手机拍出来的照片基本上都在1~2M以上,这样上传会非常耗流量,影响用户体验,此例能在保证清晰度的情况下,将4.5M的图片压缩为30K <!DOCTYPE h ...
- html 上传预览图片
直接上代码了 <!DOCTYPE html> <html><head lang="en"><meta http-equiv="C ...
- javascript 上传 预览图片 兼容 谷歌 ie
最近的项目要用到这块,但是在网上找了很多资料,很多都是假的,都不行,最后终于找到一个,还是可以兼容主流的,特分享给大家,可以用 <!DOCTYPE html PUBLIC "-//W3 ...
- Vue 中使用 viewerjs进行本地上传预览图片
https://www.cnblogs.com/shenjp/p/9754171.html 如果图片路径是 接口的返回信息的话,将路径存储在数组中,在this.$nextTick中实例化Viewer: ...
- html 图片上传预览
Html5 upload img 2012年12月27日 20:36 <!DOCTYPE HTML> <html> <head> <meta http-equ ...
- jQuery插件ImgAreaSelect 实例讲解一(头像上传预览和裁剪功能)
上一节随笔中,我们已经知道了关于jQuery插件ImgAreaSelect基本的知识:那么现在看一下实例: 首先,要知道我们应该实现什么功能? (1)图片能够实现上传预览功能 (2)拖拽裁剪图片,使其 ...
随机推荐
- 阅读《JavaScript设计模式》第三章心得
简单工厂模式 1.通过类实例化对象创建 传统的用面向对象方法去创建很多类去实现某些功能不妥当,这样不仅占用的很多类名称,而且别人使用这些方法的同时要记住每个类的名字,所以这样不适合团队开发,所以我们可 ...
- elasticsearch学习(1)简单查询与聚合
elastic 被用作全文搜索.结构化搜索.分析以及这三个功能的组合 一个ElasticSearch集群可以包含多个索引, 每个索引包含多个类型 一个类型存储着多个文档 每个文档又有多个属性 索引(名 ...
- ACM蓝桥杯之换硬币问题
题目描述: 想兑换100元零钱,有1元.2元.5元.10元四种面值,总有多少种兑换方法? 解题思路: 本题可以采用多种方法求解.最容易理解的应该就是暴力穷举和递归求解.那么本文主要介绍这两种解法. 暴 ...
- JAVA经典题--计算一个字符串中每个字符出现的次数
需求: 计算一个字符串中每个字符出现的次数 思路: 通过toCharArray()拿到一个字符数组--> 遍历数组,将数组元素作为key,数值1作为value存入map容器--> 如果k ...
- Python 1 初识python
1.Python介绍 Python是一种高级语言,与JAVA C# 等同.可以编写各种应用程序,每种语言都有其合适的应用场景.而Python 的优势在于更加人性化.简便的语法规则,以及针对各种具体场景 ...
- http协议的再次理解
1.Tomcat是根据server.xml的配置启动的.根目录下conf/server.xml. 2.Tomcat是根据server.xml的配置启动的.根目录下conf/server.xml. 3. ...
- <LeetCode OJ> 268. Missing Number
268. Missing Number Total Accepted: 31740 Total Submissions: 83547 Difficulty: Medium Given an array ...
- Atitit.一个cms有多少少扩展点,多少api wordpress  cms有多少api。。扩展点
Atitit.一个cms有多少少扩展点,多少api wordpress cms有多少api. . 扩展点 1. Api分类 WordPress APIs 1 1.1. 1 函数分类 2 1.2. 函 ...
- 源代码管理之Git命令的使用
目录 02.源代码管理之Git命令的使用 2.Git命令行演练-个人开发 2.1 如何学习git指令 2.2 初始化创建本地仓库 2.3 个人开发基本演练 2.4 Git的基本常识 3.Git命令行演 ...
- B1208 [HNOI2004]宠物收养所 平衡树||set (滑稽)
这个题是一道splay裸题,但是我不太会写,所以用set直接水过去!!!哈哈哈哈,美滋滋. set总结: set是一个集合,然后里面没用重复的元素.里面有一些函数: begin() ,返回se ...