官方参考文档：

http://fex.baidu.com/webuploader/

文件下载地址：

https://github.com/fex-team/webuploader/releases/download/0.1.5/webuploader-0.1.5.zip

html 页面代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!--这里引用的百度在线jquery文件-->
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <!--这两个文件需要去官网下载，然后放置在同此html 文件同级-->
    <link rel="stylesheet" type="text/css" href="webuploader.css" />
    <script type="text/javascript" src="webuploader.js"></script>
</head>
<body>
    <div id="filePicker">
        <div class="webuploader-pick">选择图片</div>
        <input id="file" class="webuploader-element-invisible" name="file" accept="image/*"  type="file">
        </div>
<div id="slt"></div>
</body>
<script>
    // 初始化Web Uploader
    var uploader = WebUploader.create({
        // 选完文件后，是否自动上传。
        auto: true,
        // swf文件路径《这个放在引入的 js 文件同级目录即可》
        swf: '/js/Uploader.swf',
        // 文件接收服务端。
        server: 'fileupload.php',
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#filePicker',
        // 只允许选择图片文件。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        }
    });
    //上传成功
    uploader.on( 'uploadSuccess', function( file, response ) {
        //删除《选择图片按钮》
        $("#filePicker").remove();
        //弹出服务器返回信息
        alert(response._raw);
    });
    //上传发生错误时
    uploader.on('error', function(type){
        //说明选择类型不对
        if(type=='Q_TYPE_DENIED'){
            alert('请选择正确的图片类型');
        }
    });
    //上传完成，产生预览图
    uploader.on( 'fileQueued', function( file ) {
        var $li =$("#slt");
        uploader.makeThumb( file, function( error, ret ) {
            if ( error ) {
                $li.text('预览错误');
            } else {
                $li.append('<img alt="" src="' + ret + '" />');
            }
        });
    });
</script>
</html>

fileupload.php 文件代码：

<?php
/*
  需要注意的是，一般我们在测试开发时是在，window系统上的继承环境上的，而window上是gbk2312编码
  要想存储的文件名也是中文的话，要从utf-8转为gbk2312,linux系统则不用，因为linux系统是utf-8编码
*/
$content = iconv( "utf-8","gb2312", $_FILES['file']['name']);
move_uploaded_file($_FILES['file']['tmp_name'],'./'.$content);
echo '文件上传成功！';

选择性参考：

觉得《选择图片框》比较大，所以调的小了一点。

webuploader.css 代码如下：

.webuploader-container {
    position: relative;
}
.webuploader-element-invisible {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px,1px,1px,1px);
}
.webuploader-pick {
    position: relative;
    display: inline-block;
    cursor: pointer;
    background: #00b7ee;
    padding: 5px 0 8px 0;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    overflow: hidden;
    width: 100px;
    height: 30px;
}
.webuploader-pick-hover {
    background: #00a2d4;
}

.webuploader-pick-disable {
    opacity: 0.6;
    pointer-events:none;
}

ajax+h5实现文件上传，成功即显示缩略图。的更多相关文章

  1. KindEditor文件上传成功前端显示上传失败

    一.使用kindeditor 上传图片 ,根据kindeditor 要求返回了相应的数据, 但是kindeditor 插件显示上传失败!!! 解决方法: 各个版本位置可能不同!!! 1.修改kinde ...

  2. 基于jquery ajax的多文件上传进度条

    效果图 前端代码,基于jquery <!DOCTYPE html> <html> <head> <title>主页</title> < ...

  3. [转]ExtJs入门之filefield：文件上传的配置+结合Ajax完美实现文件上传的asp.net示例

    原文地址:http://www.stepday.com/topic/?459 作文一个ExtJs的入门汉子,学习起来的确是比较费劲的事情,不过如今在这样一个网络资源如此丰富的时代,依然不是那么难了的. ...

  4. FormData+Ajax 实现多文件上传 学习使用FormData对象

    FormData对象是为序列化表以及创建与表单格式相同的数据(当然是用于XHR传输)提供便利. 今天我们使用dropzone和FormData实现多文件上传功能. var SAMP = null; / ...

  5. HTML5 + AJAX ( jQuery版本 ) 文件上传带进度条

    页面技术:HTML5 + AJAX ( jQuery) 后台技术:Servlet 3.0 服务器:Tomcat 7.0 jQuery版本:1.9.1 Servlet 3.0 代码 package or ...

  6. 使用Anthem.NET 1.5中的FileUpload控件实现Ajax方式的文件上传

    Anthem.NET刚刚发布了其最新的1.5版本,其中很不错的一个新功能就是对文件上传功能的Ajax实现.本文将简要介绍一下该功能的使用方法. Anthem.NET的下载与安装 Anthem.NET可 ...

  7. AJAX + WebService 实现文件上传

    1. 界面HTML <p >上传文件: <input id="zfiles" type="file" name="file" ...

  8. Asp.NET MVC4 + Ajax 实现多文件上传

    本文转自http://www.cnblogs.com/freeliver54/archive/2013/05/15/3079700.html JS部分测试可以,jQuery部分没有测试先留着 HTML ...

  9. ajax 无刷新文件上传

    无废话,直接重点: 1:准备工作  需要4个js库 1.jquery 8以上版本 2.jquery.ui.widget.js 3.jquery.iframe-transport.js 4.jquery ...

随机推荐

  1. ORA-01119、ORA-27040

    SQL> alter tablespace DRSYS add datafile '/ora_data/drsys02.dbf' size 1000m;alter tablespace DRSY ...

  2. OEM12C(12.1.0.5)安装插件监控mysql(linux)

    目录结构: 文章参考论坛:https://blog.csdn.net/u010719917/article/details/78128200 环境说明: oms:12.1.0.5  os:centos ...

  3. Gram矩阵 迁移学习 one-shot 之类

    格拉姆矩阵是由内积空间中的向量两两内积而得.格拉姆矩阵在向量为随机的情况下也是协方差矩阵.每个数字都来自于一个特定滤波器在特定位置的卷积,因此每个数字代表一个特征的强度,而Gram计算的实际上是两两特 ...

  4. HTML基础——网站图片显示页面

    1.图片标签 <img /> 属性: src:指的是图片显示的路径(位置) 绝对路径:D:\Pictures\Saved Pictures 相对路径: ①同一级:直接写文件名称或者./文件 ...

  5. How Javascript works (Javascript工作原理) (五) 深入理解 WebSockets 和带有 SSE 机制的HTTP/2 以及正确的使用姿势

    个人总结: 1.长连接机制——分清Websocket,http2,SSE: 1)HTTP/2 引进了 Server Push 技术用来让服务器主动向客户端缓存发送数据.然而,它并不允许直接向客户端程序 ...

  6. vue 连接后台

    在 index.js 中可以配置后台的地址:代理的方式: 这个文件在 config 中 proxyTable: { // 连接后台 '/api':{ target:"http://new.w ...

  7. c进程学习日志

    #include<unistd.h> #include<sys/types.h> #include<pwd.h> #include<stdio.h> i ...

  8. Python 语言中经常有疑惑的地方

    *)关于for循环中range(2),i到底是从0还是1开始.特别是在用数组的长度作为range的参数的时候经常会犯糊涂 #首先 >>> for i in range(5): ... ...

  9. 紫书 习题8-8 UVa 1612 （贪心+精度）

    这道题我很快就写出来了, 但是一直WA, 然后发现是精度, 这坑了我一个小时-- (1)贪心.每次就尽量分数高, 可以保证最后分数最高 (2)神tm精度问题.记住判断大于小于和等于的时候要用EPS(1 ...

  10. dos2unix和unix2dos命令使用【转】

    dos2unix, unix2dos 用来实现 DOS <=> UNIX text file 转换 aptitude install sysutils 行末: DOS 格式 0d 0a U ...