官方参考文档：

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. 【App 开发框架 - App Framework】

    http://edm.mcake.com/mark/jqmboi/#plugins 官网:http://app-framework-software.intel.com/index.php 官方API ...

  2. C#语言基础之第一个C#程序

    1.在记事本中编写如下代码,保存为Simple.cs文件. using System; class Hello World{ public static void Main(){ Console.Wr ...

  3. 配置 centos apache 的日志文件为每天保存，在home分区

    /usr/local/apache/bin/rotatelogs 这个执行程序会根据安装方式不同的位置也不同,yum安装的话,路径为:/usr/sbin/rotatelogs 改为: ErrorLog ...

  4. ICA(独立成分分析)笔记

    ICA又称盲源分离(Blind source separation, BSS) 它假设观察到的随机信号x服从模型,其中s为未知源信号,其分量相互独立,A为一未知混合矩阵. ICA的目的是通过且仅通过观 ...

  5. perl脚本去除文件中重复数据

    今天第一天写博客,写的不好请大家多多指教,废话不多说了,干货送上: ############################################################# #!/u ...

  6. NOIp2018模拟赛四十五~？？

    欠的太多,咕了咕了 最近复赛临近时间紧,就不每次都写感想和题解了,只写点有意义的好题

  7. ubuntu安装和使用

    1.查看ubuntu是32位还是64位 教程:jingyan.baidu.com/article/db55b609ab531f4ba30a2f13.html 2.安装maven 教程:www.linu ...

  8. c++PrimerChap8IO库

    #include<iostream> #include<fstream> #include<string> using namespace std; int mai ...

  9. 洛谷 P1373 小a和uim之大逃离 （差值型dp总结）

    这道题和多米诺骨牌那道题很像 ,都是涉及到差值的问题. 这道题是二维的,同时要取模. 这种题,因为当前的决策有后效性,会影响到差值,所以直接把 差值作为维度,然后计算答案的时候把差值为0的加起来就行了 ...

  10. MySQL中将数据库表名修改成大写的存储过程

    原文:MySQL中将数据库表名修改成大写的存储过程 MySQL中将数据库表名修改成大写的存储过程 创建存储过程的代码: DROP PROCEDURE IF EXISTS uppercaseTablen ...