无刷新文件上传

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

官网:

文档:

example

html

     
    
          
      
       Your browser doesn't have Flash, Silverlight or HTML5 support.
      
        
          
      浏览图片        
          
      点击上传        
          
      
     

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 += '
     
      ' + file.name + ' (' + plupload.formatSize(file.size) + ') 
      
     
';            });            //自动上传            // uploader.start();        },        //添加上传过程中的代码执行  显示文件上传的百分比        UploadProgress: function(up, file) {            document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '' + file.percent + "%";        },        //错误执行程序  在console.log位置显示错误信息和代号        Error: function(up, err) {            document.getElementById('console').innerHTML += "\nError #" + 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返回数据}