ajax+h5实现文件上传，成功即显示缩略图。

最新推荐文章于 2024-06-29 16:04:34 发布

阿远个人博客

最新推荐文章于 2024-06-29 16:04:34 发布

阅读量2.7k

点赞数 1

文章标签： ajax+h5上传无刷新文件上传文件上传

本文链接：https://blog.csdn.net/chenmoimg_/article/details/71214243

版权

官方参考文档：

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;
}