【20171127】HTML5 上传文件(向后台传base64Code--[将文件转成base64 字符串])

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_34169240/article/details/78645877
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>添加静态资源测试页面</title>
<link rel="stylesheet"
	href="/ARIESRES/assets/aries/css/base/aries-base.css" />
<script src="/ARIESRES/assets/aries/lib/jquery.js"></script>
<script src="/ARIESRES/assets/aries/main/sea.js"></script>
</head>
<body>
	<div>页面内容区域</div>
	<div class="container-fluid bg-light ltest b-a msg-query-container">
		<div aeType="aeForm" id="demoForm" name="demoForm" aeInit="true"
			class="form-horizontal">
			<div class="form-group">
				<div class="col-md-4 col-sm-12 col-xs-12 m-t-xxs">
					<div class="btn-group">
						<button type="button" class="btn btn-default fx-btn-mediumtype"
							data-id="1001" id="btn-sel-email" value="Email">Email</button>
						<button type="button" class="btn btn-default fx-btn-mediumtype"
							data-id="1005" id="btn-sel-sms">SMS</button><br><br><br>
						<input type="file" name="file"  id="file"
							 onchange="handleFiles(this.files)"/> <br>// <!-- accept="image/gif, image/jpeg, image/jpg, image/png" -->
						<button type="button" class="btn btn-primary padder-md"
							id="btn-Submit-jpg">Submit</button>
							<div id="filecontent"></div>  
							<div id="fhm"></div>  
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	seajs.use('aries-main', function() {
		//初始化逻辑写在这里
		$('#btn-Submit-jpg').on('click', function() {
			alert("click");
			var file = document.getElementById("file").files[0]; 
			var fileName = file.name;
			//alert("fileName="+fileName);
			var reader = new FileReader();  
			 //将文件以Data URL形式读入页面  
			 reader.readAsDataURL(file); 
			 reader.onload=function(e){  
			 var result=document.getElementById("filecontent"); 
			// var fhm=document.getElementById("fhm"); 
			// alert(":----:"+e.target.result);
			 var base64Code= e.target.result;
			//fhm.innerHTML=base64Code;
			var parama = "base64Code="+base64Code+"&fileName="+fileName;
			var param = "base64Code="+base64Code+"&fileName="+fileName+"&staticResourceValue={\"resourceId\":\"23\",\"folderId\":\"1\",\"resourceName\":\"资源2up\",\"resourceType\":\"GIF\",\"validDate\":\"2047-11-03 00:00:00\",\"realFileName\":\"filename\"}";
			//2  
		            $.ajaxPost($.aries.service.pushc.updateResourceForSaas,param,function(data){
		        	 alert("into 1");
		 	    },function(errorCode,errorInfo){
		        	if(errorInfo.hub_value.length>0){
		                var errorMsg = errorInfo.hub_value[0].value;//errorInfo.value获取上下文中的message信息中的value值
		                $.Notice.error(errorMsg);
		            }
		        });   
		       //2
		 }  
			 
		});
		
	});

	//匿名函数写在这里
  	 function  handleFiles(files)  
  {  
    if(files.length)  
    {  
       var file = files[0];  
     //1
        //显示文件  
		var reader = new FileReader();  
			 //将文件以Data URL形式读入页面  
			 reader.readAsDataURL(file);  
			 reader.onload=function(e){  
			 var result=document.getElementById("filecontent"); 
			 //显示文件  
			 result.innerHTML='<img src="' + e.target.result +'" alt="" />'; 
			 }
   //1
    }  
  }    
   
</script>
</html>




package com.ai.accm.common.utils;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.net.URL;
import java.net.URLConnection;

import com.ai.veriscrm.paas.push.push.common.constant.CommonConstants;
import com.ai.veriscrm.paas.push.push.common.factory.AIContextFactory;
import com.primeton.ext.infra.security.BASE64Decoder;
import com.primeton.ext.infra.security.BASE64Encoder;

public class UpOrDownLoadUtil {
	// -----------------20171125-----------------------------------------------
		/**
		 * 将文件转成base64 字符串
		 * 
		 * @param path文件路径
		 * @return *
		 * @throws Exception
		 */
		public static String encodeBase64File(String path) throws Exception {
			File file = new File(path);
			;
			FileInputStream inputFile = new FileInputStream(file);
			byte[] buffer = new byte[(int) file.length()];
			inputFile.read(buffer);
			inputFile.close();
			return new BASE64Encoder().encode(buffer);
		}

		/**
		 * 将base64字符解码[保存文件]方法1
		 * 
		 * @param base64Code
		 * @param targetPath
		 * @throws Exception
		 */
		public static void decoderBase64File(String base64Code, String path, String fileName) throws Exception {
			//截取base64Code
			int indexOf = base64Code.indexOf(";base64,");
			if(indexOf!=-1){
				base64Code = base64Code.substring(indexOf+";base64,".length());
			}
			//将空格替换为加号
			base64Code = base64Code.replace(" ", "+");
			byte[] buffer = new BASE64Decoder().decodeBuffer(base64Code);
			File f = new File(path);
			// 创建文件夹
			if (!f.exists()) {
				f.mkdirs();
			}
			FileOutputStream out = new FileOutputStream(path + "/" + fileName);
			out.write(buffer);
			out.close();

		}

		/**
		 * 将base64字符解码[保存文件]方法2
		 * 
		 * @param base64Code
		 * @param targetPath
		 * @throws Exception
		 */
		public static void toFile(String base64Code, String path, String fileName) throws Exception {

			byte[] buffer = base64Code.getBytes();
			File f = new File(path);
			// 创建文件夹
			if (!f.exists()) {
				f.mkdirs();
			}
			FileOutputStream out = new FileOutputStream(path + "/" + fileName);
			out.write(buffer);
			out.close();
		}
		
		

		//测试
		public static void main(String[] args) {
			try {
				String base64Code = encodeBase64File("H:/school/picture/phone_picture/QQ/QQ图片20171121172501.jpg");
				System.out.println(base64Code);
				decoderBase64File(base64Code, "F:\\pictures", "sql.sql");
				// toFile(base64Code, "F:\\three.txt");
			} catch (Exception e) {
				e.printStackTrace();
			}
		}
	//---------------------------------------------------------------------
	/**
	 * 下载文件
	 * 
	 * @param urlString
	 * @param filename
	 * @param savePath
	 * @return
	 * @throws Exception
	 */
	public static String download(String urlString, String filename, String savePath) throws Exception {
		// urlString="http://img.hexun.com/2011-06-21/130726386.jpg";
		// filename = "aaa固定目录.jpg";
		// savePath="F:\\picture\\";

		// 构造URL
		URL url = new URL(urlString);
		// 打开连接
		URLConnection con = url.openConnection();
		con.setRequestProperty("User-Agent", "Mozilla/31.0 (compatible; MSIE 10.0; Windows NT; DigExt)");
		// 设置请求超时为5s
		con.setConnectTimeout(5 * 1000);
		con.setReadTimeout(CommonConstants.HTTP_CONN_READ_TIME_OUT);
		// 输入流
		InputStream is = con.getInputStream();

		// 1K的数据缓冲
		byte[] bs = new byte[1024];
		// 读取到的数据长度
		int len;
		// 输出的文件流
		File sf = new File(savePath);
		if (!sf.exists()) {
			sf.mkdirs();
		}
		OutputStream os = new FileOutputStream(sf.getPath() + "\\" + filename);
		// 开始读取
		while ((len = is.read(bs)) != -1) {
			os.write(bs, 0, len);
		}
		// 完毕,关闭所有链接
		os.close();
		is.close();
		return "success";
	}

	/**
	 * 保存文件
	 * 
	 * @param inputStream
	 * @param path
	 * @param filename
	 * @throws IOException
	 */
	public static void SaveFileFromInputStream(InputStream inputStream, String path, String filename)
			throws IOException {
		// 初始化服务
		AIContextFactory.getAIContext();
		FileOutputStream fos = null;
		try {
			fos = new FileOutputStream(path + "/" + filename);
		} catch (Exception e) {
			AIContextFactory.addErrorMessage("PC00000001", "上传失败:系统找不到指定的路径");
		}
		byte[] cache = new byte[1024 * 1024];
		int bytesum = 0;
		int byteread = 0;
		while ((byteread = inputStream.read(cache)) != -1) {
			bytesum += byteread;
			fos.write(cache, 0, byteread);
			fos.flush();
		}
		fos.close();
		inputStream.close();
	}

	/**
	 * 删除磁盘中图片
	 * 
	 * @param pathName
	 * @throws Exception
	 */
	public static void deleteFile(String pathName) throws Exception {
		// File oldFile = new File("F:\\picture\\aaa.jpg");
		File oldFile = new File(pathName);
		if (oldFile.exists()) {
			oldFile.delete();// 直接删除
		}
	}

	public static void testup(byte[] bts, String path, String fileName) throws Exception {

		byte[] buffer = bts;
		File f = new File(path);
		// 创建文件夹
		if (!f.exists()) {
			f.mkdirs();
		}
		FileOutputStream out = new FileOutputStream(path + "/" + fileName);
		out.write(buffer);
		out.close();
	}
}

【js】

          var file = document.getElementById("file").files[0];
         var reader = new FileReader();  
             //将文件以Data URL形式读入页面  
             reader.readAsDataURL(file);
             reader.onload=function(e){  
           var base64Code= e.target.result;
         var param = "base64Code="+base64Code+"&fileName="+fileName+"&staticResourceValue={\"resourceId\":\"23\",\"folderId\":\"1\",\"resourceName\":\"资源2up\",\"resourceType\":\"GIF\",\"validDate\":\"2047-11-03 00:00:00\",\"realFileName\":\"filename\"}";
         

               //2  
                    $.ajaxPost($.aries.service.pushc.updateResourceForSaas,param,function(data){
                     alert("into 1");
                 },function(errorCode,errorInfo){
                    if(errorInfo.hub_value.length>0){
                        var errorMsg = errorInfo.hub_value[0].value;//errorInfo.value获取上下文中的message信息中的value值
                        $.Notice.error(errorMsg);
                    }
                });   
               //2
         }  

            


【后台】


           /**
         * 将base64字符解码[保存文件]方法1
         */
        public static void decoderBase64File(String base64Code, String path, String fileName) throws Exception {

            //截取base64Code
            int indexOf = base64Code.indexOf(";base64,");
            if(indexOf!=-1){
                base64Code = base64Code.substring(indexOf+";base64,".length());
            }
            //将空格替换为加号
            base64Code = base64Code.replace(" ", "+");

           //因为前台传过来的base64Code与后台需要的不太一致,所以这里将他们变成一致的。


            byte[] buffer = new BASE64Decoder().decodeBuffer(base64Code);
            File f = new File(path);
            // 创建文件夹
            if (!f.exists()) {
                f.mkdirs();
            }
            FileOutputStream out = new FileOutputStream(path + "/" + fileName);
            out.write(buffer);
            out.close();

        }



阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页