zoukankan      html  css  js  c++  java
  • 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);  
    						          }  
    						     });
    					    });
    

      

  • 相关阅读:
    深入理解 JavaScript(五)
    深入理解 JavaScript(四)
    深入理解 JavaScript(三)
    opecv官网接口查询
    一个python-opencv博客
    Python中range和xrange的区别
    【转载】opencv 二值化函数——cv2.threshold
    python-opencv中的cv2.inRange函数
    anaconda conda install wxpython4 安装包 python3环境(GUI)
    python之assert
  • 原文地址:https://www.cnblogs.com/yiyi17/p/7895678.html
Copyright © 2011-2022 走看看