JS上传图片并显示，确定后上传，带压缩功能，php保存

此方法适以单个图片作为上传实例。

模板代码

                <div>
				    <div id='img-box'>
				    	<img id="pic" >
				    	<input id="selectpic" type="file">				    	
				    </div>	
				    <button id="save" onclick="Save()">确定</button>
		    	</div>  

监听文件选择事件，当选择图片文件时，将选择的图片显示出来。此时并不上传，可以再选择其他图片来显示。

	window.onload=function()
	{
		var input=document.getElementById('selectpic');
		input.onchange = function(obj){//触发上传事件
			readFile(this);
		}
		//处理图片并添加到对象中的函数
		var readFile = function(obj){
			//获取文件组，单个文件也是文件组,file[0]
			var file = obj.files;
			var reader= new FileReader();
			reader.readAsDataURL(file[0]);

			reader.onload=function(e){//选择图片时显示图片
				url =this.result;
				document.getElementById('pic').src=url;
				$('#img-box input').css({ 'background':'none'})
			}
		}
	}

点击'保存'按钮事件，获取文件->判断文件是否为图片文件->读取文件内容（base64格式）->压缩文件->上传文件。

	/** 获取图片文件信息并保存 **/
	function Save() 
	{
		var file=document.getElementById('selectpic').files[0];
		if(file!==undefined)
		{
			var filetype=file.name.substring(file.name.lastIndexOf('.'));
			if (filetype ==='.jpg'||filetype ==='.png'||filetype ==='.gif'|| filetype ==='.jpeg') //控制类型
			{
				name=file.name;
				var reader = new FileReader();
				reader.readAsDataURL(file);
				reader.onload=function(e){
					var f=this.result;//base64编码 console.log(f);
    				canvasDataURL(f,{quality:0.5},function(base64){                      
		              $('#pic').val(base64); //压缩后图片回显
		              upload(base64,name);    //上传压缩后的图片文件
      				});
				}
			}			
			else
			{
				g_alert('error','请选择正确的文件类型');
				return false;
			}
		}
		else
		{
			g_alert('error',"请选择文件！");
			return false;
		}
	}

    /**
	 * [canvasDataURL 图片压缩方法（可以直接复制使用）用法见save()]
	 * @param 		path   		[文件base64格式]
	 * @param 		obj    		[图片对象 {属性：值}]
	 * @param 		callback  	[回调文件base64格式]
	 * @return    {[base64]}   	[压缩后的文件内容]
	 */

      function canvasDataURL(path, obj, callback){
          var img = new Image();
          img.src = path;
          img.setAttribute("crossOrigin",'Anonymous');
          img.onload = function(){
              var that = this;
              // 默认按比例压缩
              var w = that.width,
                  h = that.height,
                  scale = w / h;
              w = obj.width || w;
              h = obj.height || (w / scale);
              var quality = 0.7;  // 默认图片质量为0.7
              //生成canvas
              var canvas = document.createElement('canvas');
              var ctx = canvas.getContext('2d');
              // 创建属性节点
              var anw = document.createAttribute("width");
              anw.nodeValue = w;
              var anh = document.createAttribute("height");
              anh.nodeValue = h;
              canvas.setAttributeNode(anw);
              canvas.setAttributeNode(anh);
              ctx.drawImage(that, 0, 0, w, h);
              // 图像质量
              if(obj.quality && obj.quality <= 1 && obj.quality > 0){
                  quality = obj.quality;
              }
              // quality值越小，所绘制出的图像越模糊
              var base64 = canvas.toDataURL('image/jpeg', quality);
              // 回调函数返回base64的值
              callback(base64);
          }
      }


	/**[上传图片信息保存]
	 * @param  		[file]		 [文件内容]
	 * @param  		[name]		 [文件名，为了获取文件类型]
	 */
	function upload(file,name)
	{
		$.ajax({
			url:url,    //上传到php处理的方法中
			type:'POST',
			data:{
				file:file,
				name:name,
			},
			dataType:'JSON',
			success:function(res){
                console.log("上传成功");		
			},
			error:function(res){
				console.log("上传失败");
			}
		});
	}

php 保存图片代码。

public function uploadPic()
	{
		$file=input('post.file/s');	//文件信息 base64格式
		$filename=input('post.name');	//文件名  微信图片.jpg
		$typef=explode('.',$filename);

		if(count($typef)>1){
			$type=$typef[1];//文件后缀
			$name=time().".".$type;			//新文件名			
		}
        else
        {
            $name=time().$filename;    //若文件名是中文，有可能出现乱码
        }
		$tmparray   =  explode(',',$file);//分离文件内容
		if(count($tmparray)>1){
			$file=$tmparray[1];//文件内容
		}

		$savePath='public/pic/'; //图片保存路径		
		if(!file_exists($savePath))
		{
			mkdir("$savePath",0777,true);  //创建路径
		}
		$size =file_put_contents($savePath.$name, base64_decode($file));//写入文件内容，保存图片，返回值是文件大小
	}