上传预览图片的插件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)拖拽裁剪图片,使其 ...
随机推荐
- POJ3984——迷宫问题
迷宫问题 Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 31616 Accepted: 18100 Descriptio ...
- String s = new String("xyz");创建了几个对象?
两个或一个都有可能 . ”xyz”对应一个对象,这个对象放在字符串常量池,常量”xyz”不管出现多少遍,都是常量池中的那一个. new String每写一遍,就创建一个新的对象,它使用常量”xyz”对 ...
- web前端学习总结--HTML
web三要素: 浏览器:向服务器发起请求,下载服务器中的网页(HTML),然后执行HTML显示出内容 服务器:接受浏览器的请求,发送相应的页面到浏览器 HTTP协议:浏览器与服务器的通讯协议. HTM ...
- 小白两篇博客熟练操作MySQL 之 第一篇
小白两篇博客熟悉操作MySQL 之 第一篇 一.概述 1. 什么是数据库? 答: 储存数据的仓库, 如: 在ATM的事例中创建的一个db 目录, 称为数据库 2. 什么是Mysql, Oracl ...
- LINUX应用开发(面试)
LINUX应用开发工程师职位 本试卷从考试酷examcoo网站导出,文件格式为mht,请用WORD/WPS打开,并另存为doc/docx格式后再使用 说明:应用开发可考察的点非常多,关键的还是C语言和 ...
- Codeforces Round #400 (Div. 1 + Div. 2, combined)——ABCDE
题目戳这里 A.A Serial Killer 题目描述似乎很恶心,结合样例和样例解释猜测的题意 使用C++11的auto可以来一手骚操作 #include <bits/stdc++.h> ...
- poj 1724 最短路+优先队列(两个约束条件)
/*两个约束条件求最短路,用优先队列*/ #include<stdio.h> #include<string.h> #include<queue> using na ...
- 用循环链表实现Josephus问题
Josephus问题:设有n个人围坐在一个圆桌周围,现从第s个人开始报数,数到第m的人出列,然后从出列的下一个人重新开始报数,数到第m的人又出列.如此反复直到所有的人全部出列为止. 思路:构建一个没有 ...
- cogs 2478. [HZOI 2016]简单的最近公共祖先
2478. [HZOI 2016]简单的最近公共祖先 ★☆ 输入文件:easy_LCA.in 输出文件:easy_LCA.out 简单对比时间限制:2 s 内存限制:128 MB [题 ...
- Axis2中使用wsdl2java.bat生成客户端代码
1 准备环境 (1)下载Axis2的zip包axis2-1.5.5-bin.zip,并解压. 官方网址:http://ws.apache.org/axis2/ (2)设置环境变量(我的电脑->属 ...