New FileReader上传图片

function readURL(input) {
   if (input.files && input.files[0]) {
       var reader = new FileReader();
       reader.onload = function (e) {
       	
           $('#blah').attr('src', e.target.result);
       }

       reader.readAsDataURL(input.files[0]);
   }

}

  

$("#imgInp").change(function(){
	var that=this;
	 readURL(that);
});

  

<a href="javascript:;" class="b-upload">
		<span class="sub">上传名片</span>
		<input type='file' name='paymentQrCode' id="imgInp" />
	</a>

  

.b-upload{
		    height: 40px;
		    line-height: 40px;
		    font-size: 18px;
		     80%;
		    position: relative;
		    cursor: pointer;
		    color: #fff;
		    background: #008ce6;
		    border: 1px solid #ddd;
		    border-radius: 4px;
		    overflow: hidden;
		    text-align: center;
		    display: inline-block;
		    margin-top: 20px;
		}
		.b-upload input{
			position: absolute;
		    font-size: 160px;
		    right: 0;
		    top: 0;
		}

  上传方法 formData.append

<input type="file" id="iconfile"  style="display:none;" />
<label class="btn btn-primary" style="padding: 4px 20px; margin-bottom: 10px;" id="upIcon">上传</label>

  

$("#upIcon").click(function(){
							iconfile.click();
						});
						$("#iconfile").on("change", function(){						
							var file = this.files[0]; //选择上传的文件
							if (file==null){
							  return false;
							}
							 //判断类型是不是图片  
						    if(!/image/w+/.test(file.type)){
						        alert("请确保文件为图像类型"); 
						        return false;
						    }
							/* if () {
								
							}  */
							
							var formData = new FormData(); 
						     formData.append('file', file, file.name);
						     formData.append('gameId', $(this).attr('data-gameId'));
						     $.ajax({  
						          url: 'url' ,  
						          type: 'POST',  
						          data: formData,
						          dataType: 'JSON',
						          async: false,  
						          cache: false,  
						          contentType: false,  //必须设置,缺少上传不成功
						          processData: false,  //必须设置,不对数据做处理
						          success: function (data) {  
						        	 /*  $('#iconUrl').val(data.data.value); */
						        	 if(data.status==1){
						        		 alert('上传成功');
						        		 table.api().ajax.reload();
						        	 }else{
						        		alert(data.msg) 
						        	 }
						          },  
						          error: function (err) {  
						        	  console.log(err);  
						          }  
						     });
					    });

  

原文地址:https://www.cnblogs.com/yiyi17/p/7895678.html