Ajax无刷新图片插件使用

无刷新文件上传

使用jquery插件plupload实现无刷新文件上传

官网: https://www.plupload.com/
文档: http://www.phpin.net/tools/plupload/

example

html

<script type="text/javascript" src="./js/plupload.full.min.js"></script>
<div id="up">
    <!-- 文字提醒 -->
    <div id="filelist">Your browser doesn't have Flash, Silverlight or HTML5 support.</div>
    
    <!-- 点击按钮 浏览文件 -->
    <a id="pickfiles" href="javascript:;">浏览图片</a>
    
    <!-- 点击上传 -->
    <a id="uploadfiles" href="javascript:;">点击上传</a>
    
    <!-- 可选 -->
    <div id="imgs"></div>
</div>

js

//实例化    POST   /upload  
var uploader = new plupload.Uploader({
    runtimes: 'html5,flash,silverlight,html4', //默认
    browse_button: 'pickfile', // 设置浏览文件的框体
    url: './upload.php', //设置上传的脚本路径
    //初始化
    init: {
        PostInit: function() {
            //清空列表
            document.getElementById('filelist').innerHTML = '';
            //绑定单击事件开始上传
            document.getElementById('uploadfiles').onclick = function() {
                uploader.start();
                return false;
            };
        },
        //添加元素之后的代码执行   创建显示的文件列表
        FilesAdded: function(up, files) {
            plupload.each(files, function(file) {
                document.getElementById('filelist').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>';
            });
            //自动上传
            // uploader.start();
        },
        //添加上传过程中的代码执行  显示文件上传的百分比
        UploadProgress: function(up, file) {
            document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
        },
        //错误执行程序  在console.log位置显示错误信息和代号
        Error: function(up, err) {
            document.getElementById('console').innerHTML += "
Error #" + err.code + ": " + err.message;
        },
        //文件上传成功之后的代码执行   success
        FileUploaded: function(up, file, res) {
            //获取服务器返回的数据
            var result = res.response;
            //创建数据
            // eval("var res = " + res.response);
            var res = JSON.parse(res.response);
            //创建图片
            var img = document.createElement('img');
            img.src = res.path;
            img.width = "100";
            //插入图片中
            imgs.appendChild(img);
        }
    }
});
uploader.init();

php

// plupload插件默认的名称是 file
$file = $_FILES['file'];

$dir = "./uploads";
if(!file_exists($dir)) {
    mkdir($dir, 0777, true);
}

$name = time().mt_rand(1000,9999);
$suffix = pathinfo($file['name'], PATH_EXTENTION);

$path = $dir.'/'.$name.$suffix;
if (file_uploaded_move($file['tmp'], $path)) {
    echo $path; // 给JS返回数据
}