官方参考文档：

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. POJ 2114 点分治

    思路: 点分治 //By SiriusRen #include <cstdio> #include <cstring> #include <algorithm> u ...

  2. C++提高速度

  3. Dos.ORM使用教程

    Dos.C#.Net使用 Dos.ORM(原Hxj.Data)于2009年发布,并发布实体生成工具.在开发过程参考了多个ORM框架,特别是NBear,MySoft.EF.Dapper等.吸取了他们的一 ...

  4. SQL 中多个 and or 的组合运算

    sql关系型运算符优先级高到低为:not >and> or AND.OR运算符的组合使用 在WHERE子句中,通过AND.OR运算符可以同时连接多个条件,当然AND.OR运算符也可以同时使 ...

  5. SAI 绘画一个卡通动漫人物详解

    本教程介绍使用SAI 绘画一个卡通漫画人物教程 ,教程很详细,动起你的小手一起来试试吧! 软件下载:http://www.dongmansoft.com/xiazai.html

  6. Matlab从入门到精通 Chapter5 数据可视化--

    5-1 图形绘制示例 >> x2=-17:0.02:3; >> y2=1./((x2+3).^2+1)+1./((x2+9).^2+4)+5; >> subplot ...

  7. 创建一个 Django 项目

    一. 创建项目 其中: 确认项目是否创建成功: 在 manage.py 目录上运行 python manage.py runserver server 启动后,在浏览器访问 http://127.0. ...

  8. 路飞学城Python-Day1

    1.什么是编程?编程就是写代码,代码是计算机理解的语言,编程就是通过计算机理解的语言实现一些事件,计算机能理解的就是二进制,就是0和1的两个值计算机底层是电路,如何表达0和1?就像灯只能表示开灯和关灯 ...

  9. FastDFS图片服务器搭建

    *FastDFS图片服务器搭建准备:1.需要libfastcommon安装包 选择最新稳定版(libfastcommon-1.0.36.tar.gz)2.需要FastDFS安装包 选择最新稳定版(fa ...

  10. LINUX 中 python 版本升级

    首先下载源tar包 可利用linux自带下载工具wget下载,如下所示: 1 # wget http://www.python.org/ftp/python/2.7.3/Python-2.7.3.tg ...