js上傳圖片包括後臺處理

原創 FYM_91 2018-08-29 01:05 
<html>
<body>
 <img id="image"src=""/>
<br/>
 <input type="file"onchange="selectImage(this);"/>
<br/>
 <input type="button"onclick="uploadImage();"value="提交"/>
<script>
 var image = '';
 function selectImage(file){
 if(!file.files || !file.files[0]){
return;
}
 var reader = new FileReader();
 reader.onload = function(evt){
 document.getElementById('image').src = evt.target.result;
 image = evt.target.result;
}
reader.readAsDataURL(file.files[0]);
}
 function uploadImage(){

$.ajax({

type:'POST',

 url: 'ajax/uploadimage', 

 data: {image: image},

 async: false,

 dataType: 'json',

 success: function(data){

if(data.success){

alert('上傳成功');

}else{

alert('上傳失敗');

}

},

 error: function(err){

alert('網絡故障');

}

});

}
</script>
 <script src="jquery-1.11.1.min.js"></script>
</body>
</html>
2.服務器接收數據，然後寫到磁盤
[java] view plain copy
  1. import java.io.FileOutputStream;  
  2. import java.io.IOException;  
  3.   
  4. import javax.servlet.ServletException;  
  5. import javax.servlet.http.HttpServlet;  
  6. import javax.servlet.http.HttpServletRequest;  
  7. import javax.servlet.http.HttpServletResponse;  
  8.   
  9. import sun.misc.BASE64Decoder;   
  10.   
  11. /** 
  12.  * 上傳圖片。 
  13. */  
  14. public class UploadImageAjax extends HttpServlet {  
  15.   
  16.   
  17. private static final long serialVersionUID = 1L;  
  18.   
  19.   
  20. @Override  
  21.   
  22. protected void doPost(HttpServletRequest req, HttpServletResponse resp)  
  23.   
  24.  throws ServletException, IOException{  
  25.   
  26.   
  27.   
  28.   
  29.   
  30. String image = req.getParameter("image");  
  31.   
  32.   
  33.   
  34.   
  35.   
  36. // 只允許jpg  
  37.   
  38.   
  39. String header ="data:image/jpeg;base64,";  
  40.   
  41.   
  42. if(image.indexOf(header) != 0){  
  43.   
  44.   
  45.   
  46. resp.getWriter().print(wrapJSON(false));  
  47.   
  48.   
  49.   
  50. return;  
  51.   
  52.   
  53. }  
  54.   
  55.   
  56.   
  57.   
  58.   
  59. // 去掉頭部  
  60.   
  61.   
  62. image = image.substring(header.length());  
  63.   
  64.   
  65.   
  66.   
  67.   
  68. // 寫入磁盤  
  69.   
  70.   
  71. boolean success = false;  
  72.   
  73.   
  74. BASE64Decoder decoder = new BASE64Decoder();  
  75.   
  76.   
  77. try{  
  78.   
  79.   
  80.   
  81. byte[] decodedBytes = decoder.decodeBuffer(image);  
  82.   
  83.   
  84.   
  85. String imgFilePath ="D://uploadimage.jpg";  
  86.   
  87.   
  88.   
  89. FileOutputStream out = new FileOutputStream(imgFilePath);  
  90.   
  91.   
  92.   
  93. out.write(decodedBytes);  
  94.   
  95.   
  96.   
  97. out.close();  
  98.   
  99.   
  100.   
  101. success = true;  
  102.   
  103.   
  104. }catch(Exception e){  
  105.   
  106.   
  107.   
  108. success = false;  
  109.   
  110.   
  111.   
  112. e.printStackTrace();  
  113.   
  114.   
  115. }  
  116.   
  117.   
  118.   
  119.   
  120.   
  121. resp.getWriter().print(wrapJSON(success));  
  122.   
  123. }  
  124.   
  125.   
  126.   
  127. private String wrapJSON(boolean success){  
  128.   
  129.   
  130. return"{"success":"+ success +"}";  
  131.   
  132. }  
  133. }  
3.配置文件web.xml
[xml] view plain copy
  1. <web-app>  
  2. <servlet>  
  3. <servlet-name>UploadImage</servlet-name>  
  4. <servlet-class>UploadImageAjax</servlet-class>  
  5. </servlet>  
  6. <servlet-mapping>  
  7. <servlet-name>UploadImage</servlet-name>  
  8. <url-pattern>/ajax/uploadimage</url-pattern>  
  9. </servlet-mapping>  
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

關於線程池優雅關閉

使用線程池的問題 程序關閉時（eg. 上線），線程池中的任務會丟失（內存中）。 線程池優雅關閉 利用Spring中ContextClosedEvent：關閉程序觸發的事件，在使用線程池的地方，可以將線程池註冊到ThreadPoolShutd

帥氣的濤啊 2024-05-22 14:32:00

layui laydate日期時間範圍，時間默認設定爲23:59:59

在Layui中，如果你想設置日期時間選擇器（datetime）的默認結束時間爲當天的23:59:59，你可以使用如下代碼（紅色部分）： 　　　　　　laydate.render({ elem: '#test

奇怪的人 2024-05-22 14:30:20

Milvus向量數據庫入門實踐

Milvus是一個開源的向量數據庫，可以處理萬億級向量相似性搜索和分析。   非結構化數據呈爆炸式增長。而我們可以通過機器學習模型，將非結構化數據轉化爲 embedding 向量，隨後處理分析這些數據。在此過程中，向量數據庫應運而生。向量

Rickie 2024-05-22 14:29:39

salesforce零基礎學習（一百三十八）零碎知識點小總結（十）

本篇參考：  https://help.salesforce.com/s/articleView?id=release-notes.rn_apex_5level_SOQLqueries.htm&release=250&type=5 http

zero.zhang 2024-05-22 14:29:09

通過撰寫代碼理解向量計算，並用於文本分類

一、原生向量代碼，自己計算距離 import numpy as npfrom numpy import dotfrom numpy.linalg import normfrom sentence_transformers import Se

jsxyhelu 2024-05-22 14:23:18

一款開源的.NET程序集反編譯、編輯和調試神器

前言 說到.NET相關的反編譯工具大家腦海裏第一個想到的工具是什麼？ILSpy、dnSpy、還是dotPeek？咱們今天的主要內容是講講dnSpyEx（dnSpyEx是dnSpy項目的非官方Fork維護版本）這個開源的.NET程序集反編譯、

追逐時光 2024-05-22 14:21:58

「Python實用祕技17」快速獲取國內節假日安排

本文完整示例代碼及文件已上傳至我的Github倉庫https://github.com/CNFeffery/PythonPracticalSkills 　　這是我的系列文章「Python實用祕技」的第17期，本系列立足於筆者日常工作中使

費弗裏 2024-05-22 14:21:38

FolkMq v1.4.6 發佈（可以內嵌的消息中間件）

功能簡表 角色 功能 生產者（客戶端） 發佈消息、定時消息（或叫延時）、順序消息、可過期消息、事務消息。支持 Qos0、Qos1 消費者（客戶端） 訂閱、取消訂閱。消費-ACK（自動、手動） 服務端 發

劉之西東 2024-05-22 14:21:18

霍夫變換和霍夫直線檢測的原理

張博的博客 2024-05-22 14:19:57

兩個線段距離的一個定理證明 和代碼實現.

複雜度O(1) #計算兩個線段之間的最短距離: #暴力遍歷兩邊所有點求點之間距離最小速度N方. import cv2,math def jiajiao(line1, line2): line1with_x_axis=math.at

張博的博客 2024-05-22 14:19:57

kimi- MarkMap 生成思維導圖

1、Prompt： 幫我分析《被人討厭的勇氣》這本書，從裏面總結出核心內容，要求: 1.提供 5 個主要觀點 2.每個觀點至少有 3 個支撐觀點說明 3.按照以下格式，使用markdown的代碼快格式輸出: ``` # 被人討厭的勇氣 ##

2018 2024-05-22 14:14:57

Kimi 高效使用技巧，80%的人都不知道

Kimi 高效使用技巧，80%的人都不知道   聚焦於 AI提示詞 + 職場提效。   標題可能誇大或與內容不符 34 人贊同了該文章 關注我, AI 學習之旅上，我與您一同成長！ 一、引言 Kimi 作

2018 2024-05-22 14:14:57

keycloak~自定義認證流設置固定redirect_uri

redirect_uri在keycloak進行認證成功之後，會重定向到這個目標頁面，一般爲用戶的來源頁，即你在登錄之前訪問的頁面；自定義認證流是指對keycloak中的brower和direct grant兩個認證方式的過程添加自定義策略，

張佔嶺 2024-05-22 14:12:37

power 740 p740 連接遠程管理模塊

  https://111.111.111.111/   The connection for this site is not secure 111.111.111.111 uses an unsupported protocol.

emanlee 2024-05-22 14:10:26

hdu4348（主席樹區間修改）

Problem - 4348 (hdu.edu.cn) BackgroundTo The Moon是一款獨立遊戲，於2011年11月發佈，是一款由RPG Maker提供支持的角色扮演冒險遊戲。《去月球》的前提是基於一種技術，該技術使我們能

SnowLove 2024-05-22 14:10:26