上传预览图片的插件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. 4.Linux的进程

    4.1 Linux的进程 4.1.1 进程的概述 有关进程的一些基本概念: 1.什么是进程: 当程序被触发后,执行者的权限与属性.程序的程序代码与所需的数据都会被加载到内存中,操作系统并给予这个内存内 ...

  2. 点击 table 单元格 取值

    function Test() { var rows = document.getElementById("tbDetail").rows; if (rows.length > ...

  3. 【模板】dijkstra

    洛谷 4779 #include<cstdio> #include<cstring> #include<algorithm> #include<queue&g ...

  4. scp相关命令总结

    scp 跨机远程拷贝scp是secure copy的简写,用于在Linux下进行远程拷贝文件的命令,和它类似的命令有cp,不过cp只是在本机进行拷贝不能跨服务器,而且scp传输是加密的.当你服务器硬盘 ...

  5. Contest Round #451 (Div. 2)F/Problemset 898F Restoring the Expression

    题意: 有一个a+b=c的等式,去掉两个符号,把三个数连在一起得到一个数 给出这个数,要求还原等式,length <= 1e6 三个数不能含有前导0,保证有解 解法: 铁头过题法,分类然后各种判 ...

  6. 像 IDE 一样使用 vim

    本文转载自:https://github.com/yangyangwithgnu/use_vim_as_ide ##[目录] 0 vim 必知会........0.1 .vimrc 文件....... ...

  7. GIT的API主要应用示例

    这几个简单的API应用,主要是通过TOKEN来获取GIT内空的例子. 但在获取GIT的文件列表时,要注意区分目录和文件的MODE差别( 100644 普通文件 040000 普通目录 ). impor ...

  8. asp.net--mvc--异步编程

    Using Asynchronous Methods in ASP.NET MVC 4 asp.net mvc中的异步只能增加系统的性能,原来需要500个线程的,现在需要50个就够了,对一些常规的程序 ...

  9. iOS:改变UITableViewCell的选中背景色

    要改变UITableViewCell选中时的背景色,需要在-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtInde ...

  10. iOS开发使用Unwind Segue进行返回

    我们在之前的一篇博客中谈到怎样使用dismissViewControllerAnimation()的方法在iOS中返回,如今我们有一个更为方便的方法来实现界面跳转之后的返回操作.使用的是Unwind ...