上传预览图片的插件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)拖拽裁剪图片,使其 ...
随机推荐
- ASP.NET大闲话:ashx文件有啥用
在VS中右击项目,添加新项,我们找到.ashx文件在新建项模板中叫做“一般处理程序”,那么这个一般处理程序用来干吗的呢? 我们可以这样地简单理解,嗯,不需搞得太复杂,它就类似.aspx文件,用于处理传 ...
- js 保留几位小数位数
定义和用法 toFixed() 方法可把 Number 四舍五入为指定小数位数的数字.
- jquery 插件封装模板
//插件编写模板 ;(function ($) { $.fn.plugIn = function ( opt ) { var def = { //这里填写自定义的参数例如: event : 'clic ...
- detecting locked tables mysql (locked by LOCK TABLE)
detecting locked tables mysql (locked by LOCK TABLE) up vote15down votefavorite 7 I would like to kn ...
- hdu_1863_畅通工程_201403122000
畅通工程 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submis ...
- kendo Grid json解析的问题
新建立了一个 页面,在grid中使用了dropdownlist,总是显示companyId is not defined ,以前这个问题解决过了,忘记记录了额,现在不知道怎么办了 下面的这个解决方法是 ...
- Spring MVC中<mvc:annotation-driven />和<context:annotation-config />的区别分析
个人最简单的使用理解: <mvc:annotation-driven />是管理静态资源的,比如静态页面,返回JSON这些. <context:annotation-config / ...
- 怎样跟程序猿谈一场没有Bug的恋爱
<iframe width="580" height="90" align="center,center" id="cpro ...
- cppunit 的使用
原文: http://blog.csdn.net/abcdef0966/article/details/5699248
- java Regex
超全 http://www.rexegg.com/regex-lookarounds.html 这篇文章不错:http://www.cnblogs.com/lzq198754/p/5780340.ht ...