官方参考文档：

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. ThinkPHP5.0框架开发--第9章 TP5.0视图和模板

    ThinkPHP5.0框架开发--第9章 TP5.0视图和模板 第9章 TP5.0视图和模板 ===================================================== ...

  2. ECharts 在winform中使用(访问JS)

    ECharts 是百度的一个开源chart 数据统计库,采用html5 + js 编程方式. 有比较好的动态效果,功能很强大.能做出酷弦的效果. ECharts 一般用于web 开发.但winform ...

  3. 关于Spring的69个面试问答——终极列表 （转）

    这篇文章总结了一些关于Spring框架的重要问题,这些问题都是你在面试或笔试过程中可能会被问到的.下次你再也不用担心你的面试了,Java Code Geeks这就帮你解答. 大多数你可能被问到的问题都 ...

  4. python学习笔记第三章

    1.列表是由一系列特定顺序排列得元素组成,在python中用([])组成,列表得索引是从0开始,不是1 xu=['a','b',''c] print(xu) 访问列表的元素第一个元素 xu=['a', ...

  5. DedeCMS搜索结果页面调用自定义字段的方法

    有时候在我们需要在dedecms的搜索结果页面调用自定义字段,尤其是在做下载站的时候,需要在搜索结果页调用软件大小以及软件等级等等,但是我们发现在搜索结果页模板中使用“[field:字段名]”标签无法 ...

  6. GDOI2016酱油记（补发）

    这篇酱油记是前年发在MCHacker一个叫code-hub的博客上的(已崩),现在来补发一下... GDOI2016扯淡(爆零记) 大家好,我是巨弱DCDCBigBig,在五一期间和一群神牛去考GDO ...

  7. BZOJ2870 最长道路tree(并查集+LCA)

    题意 (n<=50000) 题解 #include<iostream> #include<cstring> #include<cstdio> #include ...

  8. 紫书 例题11-4 UVa247 （Floyd判断联通）

    Floyd联通, 然后为了输出联通分量而新建一个图, 让互相可以打电话的建立一条边, 然后dfs输出联通分量就ok了. #include<cstdio> #include<iostr ...

  9. 【codeforces 466D】Increase Sequence

    [题目链接]:http://codeforces.com/problemset/problem/466/D [题意] 给你n个数字; 让你选择若干个区间; 且这些区间[li,ri]; 左端点不能一样; ...

  10. Linux防火墙iptables安装配置--使用远程工具Xmanager和ftp服务安装配置

    一.linux关闭防火墙:    a.用户直接在终端输入:service iptables stop     查看防火墙状况:service iptables status  b.root用户在终端输 ...