一个图片上传预览

一、一个按钮上传文件操作

前台选择文件，只能通过input的file类型的文件选择框操作。但有时却为了界面的美观，要求用按钮来完成。

第一步、隐藏文件选择框

第二步、设置按钮事件onclick，触发文件选择框事件

第三步、选择文件后自动上传，触发文件选择时事件onchange

第四步，使用插件上传，插件有很多，大家可以网上找，我这边用的是jquery.form.js插件（http://plugins.jquery.com/form/）  

   
    
  
      
    上传文件

    
    
	//打开文件选择框
	 function selectFile(){
	      $("#file").trigger("click");
	 }
	
	function fileUpload(){
		var option = {
		        url : "http://127.0.0.1:8080/struts2/user/UserAction_add",     //自己的url
		        type : 'POST',
		        datatype:'json',
		        clearForm: true,//提交后是否清空
		        success : function(map) {
		         alert("上传成功!");
		        } ,
		        error:function(data){
		         alert("页面请求失败！");
		        }
		    };
		    $("#upLoadForm").ajaxSubmit(option);
			return false;
            //或者ajax等
	}

    

 

二、一个图片上传预览

 

 




ssm
	


	文件上传		
	  
			
			  
			点击图片上传
	  
	
   
//打开文件选择框
function selectFile(){
     $("#file0").trigger("click");
}

$("#file0").change(function(){  
		 var objUrl = getObjectURL(this.files[0]) ;//获取文件信息  
		 //console.log("objUrl = "+objUrl + "==== "+this);  
		 checkFile(this)
		 if (objUrl) {  
		  $("#img0").attr("src", objUrl);  
		 }   
}) ;  
function getObjectURL(file) {  
		 var url = null;   
		 if (window.createObjectURL!=undefined) {  
		  url = window.createObjectURL(file) ;  
		 } else if (window.URL!=undefined) { // mozilla(firefox)  
		  url = window.URL.createObjectURL(file) ;  
		 } else if (window.webkitURL!=undefined) { // webkit or chrome  
		  url = window.webkitURL.createObjectURL(file) ;  
		 }  
		 return url ;  
} 

//检查是否是图片
function checkFile(file) {
   var filehz = getFileHz(file.value);
   //console.log(filehz);
   if(filehz == "" || filehz == null){
   	toastr.error("请重新选择！");
   	return false;
   }
   if ("png" != filehz && "jpg" != filehz && "jpeg" != filehz) {
       toastr.error("上传的文件类型不符合要求！");
       return false;
   }
}
function getFileHz(filename) {
   var arr = new Array();
   arr = filename.split(".");
   return arr[arr.length - 1];
}

           选择图片之后  

 

 

参考文章

https://blog.csdn.net/wdehxiang/article/details/77435975

https://blog.csdn.net/qq_41485414/article/details/80051845