引入样式和js文件

    <link href="css/bootstrap.min.css" type="text/css" rel="stylesheet"/>

    <link rel="stylesheet" href="css/jquery.fileupload.css">

    <link rel="stylesheet" href="css/jquery.fileupload-ui.css">

    <script src="js/jquery.js"></script>

    <script src="js/jquery.ui.widget.js"></script>

    <script src="js/jquery.fileupload.js"></script>

html

<body>

  <div class="row fileupload-buttonbar" style="padding-left:15px;">

    <div class="thumbnail col-sm-6">

      <img id="weixin_show" style="height:180px;margin-top:10px;margin-bottom:8px;"  src="__PUBLIC__/images/game/game_1.png" data-holder-rendered="true">

      <div class="progress progress-striped active" role="progressbar" aria-valuemin="10" aria-valuemax="100" aria-valuenow="0">

        <div id="weixin_progress" class="progress-bar progress-bar-success" style="width:0%;"></div>

      </div>

      <div class="caption" align="center">

        <span id="weixin_upload" class="btn btn-primary fileinput-button">

        <span>上传</span>

        <input type="file" id="weixin_image" name="files" multiple>

        </span>

        <a id="weixin_cancle" href="javascript:void(0)" class="btn btn-warning" role="button" onclick="cancleUpload('weixin')" style="display:none">删除</a>

      </div>

    </div>

  </div>

</body>

上传ajax:

    <script type="text/javascript">

      $(function() {

          $("#weixin_image").fileupload({

                  url: 'http://www.test007.com/ser/api/json/file/upload/batch',

                  sequentialUploads: true

              }).bind('fileuploadprogress', function (e, data) {  //主要是进度条的修改

                  var progress = parseInt(data.loaded / data.total * 100, 10);

                  $("#weixin_progress").css('width',progress + '%');

                  $("#weixin_progress").html(progress + '%');

              }).bind('fileuploaddone', function (e, data) {  //上传结束后执行的操作

                  var imgurl = JSON.parse(data.result).data;

                  $("#weixin_show").attr("src", imgurl);

                  $("#weixin_upload").css({display:"none"});

                  $("#weixin_cancle").css({display:""});

              });  

          });

    </script>

jquery-file-upload附件上传的更多相关文章

  1. jQuery File Upload 图片上传解决方案兼容IE6+

    1.下载:https://github.com/blueimp/jQuery-File-Upload 2.命令: npm install bower install ================= ...

  2. jQuery File Upload 文件上传插件使用一 (最小安装 基本版)

    jQuery File Upload 是一款非常强大的文件上传处理插件,支持多文件上传,拖拽上传,进度条,文件验证及图片音视频预览,跨域上传等等. 可以说你能想到的功能它都有.你没想到的功能它也有.. ...

  3. jQuery File Upload文件上传插件简单使用

    前言 开发过程中有时候需要用户在前段上传图片信息,我们通常可以使用form标签设置enctype=”multipart/form-data” 属性上传图片,当我们点击submit按钮的时候,图片信息就 ...

  4. jquery file upload 文件上传插件

    1. jquery file upload 下载 jquery file upload Demo 地址:https://blueimp.github.io/jQuery-File-Upload/ jq ...

  5. jQuery File Upload 文件上传插件使用二 (功能完善)

    使用Bootstrap美化进度条 Bootstrap现在几乎是人尽皆知了,根据它提供的进度条组件, 让进度条显得高大尚点 正因为其功能强大,js模块文件之间牵连较深 不好的地方耦合度非常高 重要的参数 ...

  6. Springmvc file多附件上传 显示 删除操作

    之前项目需求要做一个多附件上传 并显示上传文件 带删除操作 一筹莫展之际搜到某个兄弟发的博客感觉非常好用被我copy下来了此贴算是改良版 再次感谢(忘记叫什么了时间也有点久没有历史记录了)先上图 基于 ...

  7. DVWA之File Upload (文件上传漏洞)

    目录 Low: Medium: 方法一:抓包修改文件的type 方法二:00截断 High: Impossible : Low: 源代码: <?php if( isset( $_POST[ 'U ...

  8. java附件上传下载磁盘版

    ACTION public class UploadAction extends BaseAction { private static final long serialVersionUID = 1 ...

  9. 用jQuery File Upload做的上传控件demo，支持同页面多个上传按钮

    需求 有这么一个需求,一个form有多个文件要上传,但又不是传统的图片批量上传那种,是类似下图这种需求,一开始是用的swfupload做的上传,但是问题是如果有多个按钮的话,就要写很多重复的代码,于为 ...

  10. jQuery File Upload跨域上传

    最近在做一个一手粮互联网项目,方案为前后端分离,自己负责前端框架,采用了Requirejs+avalonjs+jquery三个框架完成. 前后端通过跨域实现接口调用,中间也发现了不少问题,尤其是在富文 ...

随机推荐

  1. [Python]南邮OJ代码备份爬虫

    之前看过Python学习的经验,说以project为导向学习. 自己分析了一下,一般接触Python的都有一定的其它语言基础,对于程序设计的基本逻辑,语法都有一个大概的了解.而Python这样的脚本语 ...

  2. [sql]大型网站MySQL深度优化揭秘

    大型网站MySQL深度优化揭秘 第1章优化的思路和线路 1.1 网站优化的思路    2 1.2 MySQL优化,nginx这样的东西怎么优化? 第2章硬件层面优化 2.1 数据库物理机 2.1.1 ...

  3. Cocos2d-x 3.0final 终结者系列教程03-源代码文件夹说明

    话说今天从霍营到回龙观,走到天鑫家园东路.我肋哥去,堵死我啦.7:30出门,9:10还没到回龙观. 北京这交通真是坑爹.回过头想想.怪自己走小路,有时候确实快.可有时候真堵. 堵了35分钟后果断掉头, ...

  4. go--Ubuntu下安装GO LANG，测试输入hello world

    1.下载go语言源码,https://storage.googleapis.com/golang/go1.6.1.linux-amd64.tar.gz 2.解压缩源码包tar zxvf go1.6.1 ...

  5. PairRDD中算子aggregateByKey图解

    PairRDD 有几个比较麻烦的算子,常理解了后面又忘记了,自己按照自己的理解记录好,以备查阅 1.aggregateByKey aggregate 是聚合意思,直观理解就是按照Key进行聚合. 转化 ...

  6. FreeRTOS 低功耗之停机模式

    以下转载自安富莱电子: http://forum.armfly.com/forum.php STM32F103 如何进入停机模式在 FreeRTOS 系统中,让 STM32 进入停机模式比较容易,调用 ...

  7. c++重载后置++和--

    c++语言并不要求递增和递减运算符必须是类的成员,但是因为它们改变的正好是所操作对象的状态,所以建议将其设定为成员函数.(但下面的代码为了练习,还是分别采用成员函数和全局函数的方式实现) 业余实现代码 ...

  8. js中特殊转换字符为html标签

    function htmlEncode(text){ return text.replace(/&/g,'&amp').replace(/\"/g,'&quot'). ...

  9. js中定义属性和变量

    //定义数组 var arr = []; //定义对象 var obj = {}; //定义正则表达式 var reg = /../;

  10. JavaScript高级 面向对象（5）--最简单的继承方式，混入mix

    说明(2017.3.30): 1. 最简单的继承方式,混入mix <!DOCTYPE html> <html lang="en"> <head> ...