jQuery File Upload 是一款非常强大的文件上传处理插件，支持多文件上传，拖拽上传，进度条，文件验证及图片音视频预览，跨域上传等等。

可以说你能想到的功能它都有。你没想到的功能它也有。。

不过由于功能太强大，使用起来还是需要点基本功，否则调试开发会遇到困难。

本文结合官方教程只介绍最基本的上传功能。

以我目前最新的9.7.1版本

下载下来解压到服务器能访问到的地方。

文件如下：

1. 新建一个文件夹MyDemo或者你随意。

把外面的server和js目录拷贝到里面，注意server目录里面包含gae-go、gae-python、php这些后端语言，只保留php就行。

2. 新建一html，内容如下，主要JS和CSS的路径。还有有时候国内无法访问ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js，可以引用本地的jQuery。

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>jQuery File Upload Example</title>

<style>

.bar {

    height: 18px;

    background: green;

}

</style>

</head>

<body>

<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>

<script src="js/jquery-1.11.1.min.js"></script>

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

<script src="js/jquery.iframe-transport.js"></script>

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

<script>

$(function () {

    $('#fileupload').fileupload({

        dataType: 'json',

        // 上传完成后的执行逻辑

        done: function (e, data) {

            $.each(data.result.files, function (index, file) {

                $('<p/>').text(file.name).appendTo(document.body);

            });

        },

        // 上传过程中的回调函数

        progressall: function (e, data) {

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

            $(".bar").text(progress + '%');

            $('#progress .bar').css(

                'width',

                progress + '%'

            );

        }

    });

});

</script>

<!-- 进度条 -->

<div id="progress">

    <div class="bar" style="width: 0%;"></div>

</div>

</body>

</html>

传统上都是用<form>表单提交上传，现在是纯Ajax。需要注意的input的data-url属性，这就是需要php服务端处理的路径。

浏览器打开，以我的为例 http://localhost/my/JS/Plugins/jQuery-File-Upload-master/MyDemo/

由于是在本地测试，为了看到进度进度效果，建议找个大点的(~1G)文件上传。可以直接拖个文件到浏览器窗口中。

效果如下，上传过程中绿色进度条会不停的增加。

F12打开调试面板，耐心等待上传完成，会看到上传完成后，有ajax返回。

地址类似：http://localhost/my/JS/Plugins/jQuery-File-Upload-master/MyDemo/server/php/

返回的数据是JSON格式，内容类似：

{"files":[{"name":"1409665745-8365","size":1472358262,"type":"multipart\/form-data; boundary=----WebKitFormBoundaryxLzvFFmSOiWiY1Ka","error":"The uploaded file exceeds the post_max_size directive in php.ini"}]}

很明显上传文件太大了，超出php.ini限制。先不改了。

如果我们直接丢个图片进去，返回的json类似：

{

    "files": [

        {

            "name": "10095978136d36c635.jpg",

            "size": 12479,

            "type": "image/jpeg",

            "url": "http://localhost/my/JS/Plugins/jQuery-File-Upload-master/MyDemo/server/php/files/10095978136d36c635.jpg",

            "thumbnailUrl": "http://localhost/my/JS/Plugins/jQuery-File-Upload-master/MyDemo/server/php/files/thumbnail/10095978136d36c635.jpg",

            "deleteUrl": "http://localhost/my/JS/Plugins/jQuery-File-Upload-master/MyDemo/server/php/?file=10095978136d36c635.jpg",

            "deleteType": "DELETE"

        }

    ]

}

来到MyDemo\server\php\files 会发现上传的图片，而且thumbnail目录还保存了裁剪过的图片，这都是官方提供的UploadHandler.php的功劳。

至此，一个拖拽上传文件的Demo完成了。但是功能仍然很弱，比如没有文件类型及大小限制，没有前台的错误提示。

官方提供的API有maxFileSize和acceptFileTypes。这在基本版里是不生效的，在UI版里才可以。具体的完善功能见第二篇

详见 maxFileSize and acceptFileTypes not working #760。

jQuery File Upload 文件上传插件使用一 (最小安装 基本版)的更多相关文章

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

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

  2. jquery file upload 文件上传插件

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

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

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

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

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

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

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

  6. jQuery文件上传插件jQuery Upload File 有上传进度条

    jQuery文件上传插件jQuery Upload File 有上传进度条 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度 ...

  7. JQuery文件上传插件JQuery.upload.js的用法简介

    JQuery文件上传插件,这个插件很小,用法很简单,效果却很棒.注意:JQuery版本要求1.8及以上,大家执行如果没效果,则检查JQuery版本,如果是1.8及以上,则该插件源码中的.size()需 ...

  8. JQuery文件上传插件ajaxFileUpload在Asp.net MVC中的使用

    0 ajaxFileUpload简介 ajaxFileUpload插件是一个非常简单的基于Jquery的异步上传文件的插件,使用过程中发现很多与这个同名的,基于原始版本基础之上修改过的插件,文件版本比 ...

  9. 可拖拽和带预览图的jQuery文件上传插件ssi-uploader

    插件描述:ssi-uploader是一款带预览图并且可以拖拽文件的jQuery ajax文件上传插件.该文件上传插件支持AJAX,支持多文件上传,可控制上的文件格式和文件大小,提供各种回调函数,使用非 ...

随机推荐

  1. [原创] SiteServer 3.5 批量导入文章的SQL处理脚本

    2005时做过一个小网站,当时是用ASP+Access做的,功能很简单,但里面的文章不少 现在就像把它转移到SS上来,重点就是如何导入文章 本来SS本身提供了批量导入功能,但对于在WEB上一次性导入一 ...

  2. R语言学习笔记1——R语言中的基本对象

    R语言,一种自由软件编程语言与操作环境,主要用于统计分析.绘图.数据挖掘.R本来是由来自新西兰奥克兰大学的Ross Ihaka和Robert Gentleman开发(也因此称为R),现在由“R开发核心 ...

  3. ajax简单做html查询删除(鲜花)

    下载视频+项目链接:https://pan.baidu.com/s/1jUld3-Nqm3fUAzFSX8kjlQ

  4. hdu 1026 Ignatius and the Princess I(BFS+优先队列）

    传送门: http://acm.hdu.edu.cn/showproblem.php?pid=1026 Ignatius and the Princess I Time Limit: 2000/100 ...

  5. 自学安卓练习作品单词APP(1)-安卓的hello word与有道字典防爬虫破解

    1.前言 闲来无聊.手机每天又是都接触的东西.程序什么的最容易接触到.想到有些人说前后端都做就是全栈的说法.哦,你看html5全栈. 要我说多接触一些多有意思.天天写后端.还不是业务层.又不是什么高大 ...

  6. elementUI之switch应用的坑

    前言: 因为项目中用到了饿了么出品的element-ui这一套ui框架,所以很多地方都踩在了坑里,前面碰到了一些,今天着重聊一下switch这个组件. 首先switch接受Boolean类型的数据,莫 ...

  7. mysql获取正在运行的sql

    select id,db,host,time,info,command from information_schema.processlist where command<>'sleep' ...

  8. python统计文档中词频

    python统计文档中词频的小程序 python版本2.7 效果如下: 程序如下,测试文件与完整程序在我的github中 #统计空格数与单词数 本函数只返回了空格数 需要的可以自己返回多个值 def ...

  9. JavaScript高级程序设计（复制变量值、传递参数）

    复制变量值 一个变量向另一个变量复制基本类型值和引用类型值时,是存在不同的. 一个变量向另一个变量复制基本类型的值,会在变量的对象上创建一个新值,然后把该值复制到为新变量分配的位置上. var num ...

  10. http请求常用的状态码

    常见的http请求响应的状态码 一些常见的状态码为: 200 – 服务器成功返回网页 404 – 请求的网页不存在 503 – 服务不可用 1xx(临时响应) 表示临时响应并需要请求者继续执行操作的状 ...