1.引入文件 需要引入js、css、swf文件
<script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script><link rel="stylesheet" type="text/css" href="webuploader/webuploader.css"><script type="text/javascript" src="webuploader/webuploader.min.js"></script>
<!DOCTYPE html><html><head><meta charset="utf-8"> ???<title></title> ???<script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script> ???<link rel="stylesheet" type="text/css" href="webuploader/webuploader.css"> ???<script type="text/javascript" src="webuploader/webuploader.min.js"></script></head><body> ???<!--dom结构部分--><div id="uploader-demo"> ???<!--用来存放item--> ???<div id="fileList" class="uploader-list" style="width: 100%;height: 200px"></div> ???<div id="filePicker">选择图片</div> ???<input id="start" type="submit" value="开始上传"></div></body><script type="text/javascript"> ???var uploader = WebUploader.create({ ???// 选完文件后，是否自动上传。 ???auto: false, ???// swf文件路径 ???swf: ‘/webuploader/Uploader.swf‘, ???// 文件接收服务端。 ???server: ‘upload.php‘, ???// 选择文件的按钮。可选。 ???// 内部根据当前运行是创建，可能是input元素，也可能是flash. ???pick: {id:‘#filePicker‘}, ???// 只允许选择图片文件。 ???accept: { ???????title: ‘Images‘, ???????extensions: ‘gif,jpg,jpeg,bmp,png‘, ???????mimeTypes: ‘image/*‘ ???}});var $list=$(‘#fileList‘);var thumbnailWidth=100;var thumbnailHeight=100; ???// 当有文件添加进来的时候uploader.on( ‘fileQueued‘, function( file ) { ???var $li = $( ???????????‘<div style="display:inline-block;margin-left:10px" id="‘ + file.id + ‘" class="file-item thumbnail">‘ + ???????????????‘<img>‘ + ???????????????‘<div class="info">‘ + file.name + ‘</div>‘ + ???????????????‘<a id="del">删除</a>‘+ ???????????????‘<span id="tip">等待上传...</span><progress value="0" max="1"></progress>‘+ ???????????‘</div>‘ ???????????), ???????$img = $li.find(‘img‘); ???// $list为容器jQuery实例 ???$list.append( $li ); ???// 创建缩略图 ???// 如果为非图片文件，可以不用调用此方法。 ???// thumbnailWidth x thumbnailHeight 为 100 x 100 ???uploader.makeThumb( file, function( error, src ) { ???????if ( error ) { ???????????$img.replaceWith(‘<span>不能预览</span>‘); ???????????return; ???????} ???????$img.attr( ‘src‘, src ); ???}, thumbnailWidth, thumbnailHeight );});//关闭自动上传，开启点击上传 用于之后的删除图片$(‘#start‘).click(function(){ ???uploader.upload();});$list.on(‘click‘,‘#del‘,function(){ ???//console.log($(this)); ???var ID=$(this).parent().attr(‘id‘);//选中谁获取谁上传图片的id 如：div id="WU_FILE_0" ???$(this).parent().remove();//删除当前选中项的父节点 即删除图片 ???var queID=uploader.getFile(ID);//队列id ???uploader.removeFile(queID);//删除队列id });// 文件上传过程中创建进度条实时显示。uploader.on( ‘uploadProgress‘, function( file, percentage ) { ???$(‘#‘+file.id).find(‘progress‘).val(percentage);});//上传成功返回数据提示uploader.on( ‘uploadSuccess‘, function( file,data ) { ???$(‘#‘+file.id).find(‘#del‘).remove(); ???if(data.status==0){ ???????$(‘#‘+file.id).find(‘#tip‘).text(‘上传成功‘).css(‘color‘,‘green‘); ???}else{ ???????$(‘#‘+file.id).find(‘#tip‘).text(‘上传失败‘).css(‘color‘,‘red‘); ???????$(‘#‘+file.id).find(‘progress‘).remove(); ???}});uploader.on( ‘uploadError‘, function( file ) { ???$(‘#‘+file.id).find(‘#tip‘).text(‘上传出错‘).css(‘color‘,‘red‘);});//上传完成后删除进度条uploader.on( ‘uploadComplete‘, function( file ) { ??$(‘#‘+file.id).find(‘progress‘).remove();});</script></html>2.上传文件类
<?php/** ????file: fileupload.class.php 文件上传类FileUpload ???本类的实例对象用于处理上传文件，可以上传一个文件，也可同时处理多个文件上传 ?*/ ?class FileUpload { ????private $path = "uploads"; ?????????//上传文件保存的路径 ???private $allowtype = array(‘jpg‘,‘gif‘,‘png‘); //设置限制上传文件的类型 ???private $maxsize = 1000000; ??????????//限制文件上传大小（字节） ???private $israndname = true; ??????????//设置是否随机重命名文件， false不随机 ??????private $originName; ?????????????//源文件名 ???private $tmpFileName; ?????????????//临时文件名 ???private $fileType; ??????????????//文件类型(文件后缀) ???private $fileSize; ??????????????//文件大小 ???private $newFileName; ?????????????//新文件名 ???private $errorNum = 0; ????????????//错误号 ???private $errorMess=""; ????????????//错误报告消息 ??????/** ????* 用于设置成员属性（$path, $allowtype,$maxsize, $israndname） ????* 可以通过连贯操作一次设置多个属性值 ????*@param ?string $key ?成员属性名(不区分大小写) ????*@param ?mixed ?$val ?为成员属性设置的值 ????*@return ?object ????返回自己对象$this，可以用于连贯操作 ????*/ ???function set($key, $val){ ?????$key = strtolower($key); ??????if( array_key_exists( $key, get_class_vars(get_class($this) ) ) ){ ???????$this->setOption($key, $val); ?????} ?????return $this; ???} ??????/** ????* 调用该方法上传文件 ????* @param ?string $fileFile ?上传文件的表单名称 ?????* @return bool ???????如果上传成功返回数true ?????*/ ??????function upload($fileField) { ?????$return = true; ?????/* 检查文件路径是滞合法 */ ?????if( !$this->checkFilePath() ) { ??????????????$this->errorMess = $this->getError(); ???????return false; ?????} ?????/* 将文件上传的信息取出赋给变量 */ ?????$name = $_FILES[$fileField][‘name‘]; ?????$tmp_name = $_FILES[$fileField][‘tmp_name‘]; ?????$size = $_FILES[$fileField][‘size‘]; ?????$error = $_FILES[$fileField][‘error‘]; ????????/* 如果是多个文件上传则$file["name"]会是一个数组 */ ?????if(is_Array($name)){ ???????????$errors=array(); ???????/*多个文件上传则循环处理 ， 这个循环只有检查上传文件的作用，并没有真正上传 */ ???????for($i = 0; $i < count($name); $i++){ ??????????/*设置文件信息 */ ?????????if($this->setFiles($name[$i],$tmp_name[$i],$size[$i],$error[$i] )) { ???????????if(!$this->checkFileSize() || !$this->checkFileType()){ ?????????????$errors[] = $this->getError(); ?????????????$return=false; ????????????} ?????????}else{ ???????????$errors[] = $this->getError(); ???????????$return=false; ?????????} ?????????/* 如果有问题，则重新初使化属性 */ ?????????if(!$return) ?????????????????????$this->setFiles(); ???????} ??????????if($return){ ?????????/* 存放所有上传后文件名的变量数组 */ ?????????$fileNames = array(); ???????????????/* 如果上传的多个文件都是合法的，则通过销魂循环向服务器上传文件 */ ?????????for($i = 0; $i < count($name); $i++){ ????????????if($this->setFiles($name[$i], $tmp_name[$i], $size[$i], $error[$i] )) { ?????????????$this->setNewFileName(); ??????????????if(!$this->copyFile()){ ???????????????$errors[] = $this->getError(); ???????????????$return = false; ?????????????} ?????????????$fileNames[] = $this->newFileName; ?????????????} ???????????????????} ?????????$this->newFileName = $fileNames; ???????} ???????$this->errorMess = $errors; ???????return $return; ?????/*上传单个文件处理方法*/ ?????} else { ???????/* 设置文件信息 */ ???????if($this->setFiles($name,$tmp_name,$size,$error)) { ?????????/* 上传之前先检查一下大小和类型 */ ?????????if($this->checkFileSize() && $this->checkFileType()){ ????????????/* 为上传文件设置新文件名 */ ???????????$this->setNewFileName(); ????????????/* 上传文件 ?返回0为成功， 小于0都为错误 */ ???????????if($this->copyFile()){ ??????????????return true; ???????????}else{ ?????????????$return=false; ???????????} ?????????}else{ ???????????$return=false; ?????????} ???????} else { ?????????$return=false; ????????} ???????//如果$return为false, 则出错，将错误信息保存在属性errorMess中 ???????if(!$return) ?????????$this->errorMess=$this->getError(); ????????????return $return; ?????} ???} ??????/** ?????* 获取上传后的文件名称 ????* @param ?void ??没有参数 ????* @return string 上传后，新文件的名称， 如果是多文件上传返回数组 ????*/ ???public function getFileName(){ ?????return $this->path.‘/‘.$this->newFileName; ???} ??????/** ????* 上传失败后，调用该方法则返回，上传出错信息 ????* @param ?void ??没有参数 ????* @return string ?返回上传文件出错的信息报告，如果是多文件上传返回数组 ????*/ ???public function getErrorMsg(){ ?????return $this->errorMess; ???} ??????/* 设置上传出错信息 */ ???private function getError() { ?????$str = "上传文件<font color=‘red‘>{$this->originName}</font>时出错 : "; ?????switch ($this->errorNum) { ???????case 4: $str .= "没有文件被上传"; break; ???????case 3: $str .= "文件只有部分被上传"; break; ???????case 2: $str .= "上传文件的大小超过了HTML表单中MAX_FILE_SIZE选项指定的值"; break; ???????case 1: $str .= "上传的文件超过了php.ini中upload_max_filesize选项限制的值"; break; ???????case -1: $str .= "未允许类型"; break; ???????case -2: $str .= "文件过大,上传的文件不能超过{$this->maxsize}个字节"; break; ???????case -3: $str .= "上传失败"; break; ???????case -4: $str .= "建立存放上传文件目录失败，请重新指定上传目录"; break; ???????case -5: $str .= "必须指定上传文件的路径"; break; ???????default: $str .= "未知错误"; ?????} ?????return $str.‘<br>‘; ???} ??????/* 设置和$_FILES有关的内容 */ ???private function setFiles($name="", $tmp_name="", $size=0, $error=0) { ?????$this->setOption(‘errorNum‘, $error); ?????if($error) ???????return false; ?????$this->setOption(‘originName‘, $name); ?????$this->setOption(‘tmpFileName‘,$tmp_name); ?????$aryStr = explode(".", $name); ?????$this->setOption(‘fileType‘, strtolower($aryStr[count($aryStr)-1])); ?????$this->setOption(‘fileSize‘, $size); ?????return true; ???} ??????/* 为单个成员属性设置值 */ ???private function setOption($key, $val) { ?????$this->$key = $val; ???} ??????/* 设置上传后的文件名称 */ ???private function setNewFileName() { ?????if ($this->israndname) { ???????$this->setOption(‘newFileName‘, $this->proRandName()); ???????} else{ ????????$this->setOption(‘newFileName‘, $this->originName); ?????} ????} ??????/* 检查上传的文件是否是合法的类型 */ ???private function checkFileType() { ?????if (in_array(strtolower($this->fileType), $this->allowtype)) { ???????return true; ?????}else { ???????$this->setOption(‘errorNum‘, -1); ???????return false; ?????} ???} ??????/* 检查上传的文件是否是允许的大小 */ ???private function checkFileSize() { ?????if ($this->fileSize > $this->maxsize) { ???????$this->setOption(‘errorNum‘, -2); ???????return false; ?????}else{ ???????return true; ?????} ???} ??????/* 检查是否有存放上传文件的目录 */ ???private function checkFilePath() { ?????if(empty($this->path)){ ???????$this->setOption(‘errorNum‘, -5); ???????return false; ?????} ?????if (!file_exists($this->path) || !is_writable($this->path)) { ???????if (!@mkdir($this->path, 0755)) { ?????????$this->setOption(‘errorNum‘, -4); ?????????return false; ???????} ?????} ?????return true; ???} ??????/* 设置随机文件名 */ ???private function proRandName() { ?????????$fileName = date(‘YmdHis‘)."_".rand(100,999); ?????????return $fileName.‘.‘.$this->fileType; ????} ??????/* 复制上传文件到指定的位置 */ ???private function copyFile() { ?????if(!$this->errorNum) { ???????$path = rtrim($this->path, ‘/‘).‘/‘; ???????$path .= $this->newFileName; ???????if (@move_uploaded_file($this->tmpFileName, $path)) { ?????????return true; ???????}else{ ?????????$this->setOption(‘errorNum‘, -3); ?????????return false; ???????} ?????} else { ???????return false; ?????} ???} ?}/*$file = new FileUpload();$file->upload(‘file‘);echo $file->getFileName();*/ ?//开始上传$file = new FileUpload();if($file->upload(‘file‘)){ ?$url=$file->getFileName(); ?$res=[‘status‘=>0,‘url‘=>$url];} else{ ?$res=[‘status‘=>1,‘url‘=>‘error‘];}echo json_encode($res);web uploader的使用
原文地址：http://www.cnblogs.com/fyh-php/p/7592038.html