JS 實現上傳照片到伺服器和後臺處理處理這個照片

阿新 • • 發佈：2019-02-16

1.js進行圖片預覽使用input標籤來選擇圖片，使用FileReader讀取圖片並轉成base64編碼，然後傳送給伺服器。

<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.伺服器接收資料，然後寫到磁碟

import java.io.FileOutputStream;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import sun.misc.BASE64Decoder;
/**
* 上傳圖片。
*/
publicclass UploadImageAjax extends HttpServlet {
privatestaticfinallong serialVersionUID = 1L;
@Override
protectedvoid doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException{
String image = req.getParameter("image");
// 只允許jpg
String header ="data:image/jpeg;base64,"

;
if(image.indexOf(header) != 0){
resp.getWriter().print(wrapJSON(false));
return;
}
// 去掉頭部
image = image.substring(header.length());
// 寫入磁碟
boolean success = false;
BASE64Decoder decoder = new BASE64Decoder();
try{
byte[] decodedBytes = decoder.decodeBuffer(image);
String imgFilePath ="D://uploadimage.jpg";
FileOutputStream out = new FileOutputStream(imgFilePath);
out.write(decodedBytes);
out.close();
success = true;
}catch(Exception e){
success = false;
e.printStackTrace();
}
resp.getWriter().print(wrapJSON(success));
}
private String wrapJSON(boolean success){
return"{"success":"+ success +"}";
}
}

3.配置檔案web.xml

<web-app>
<servlet>
<servlet-name>UploadImage</servlet-name>
<servlet-class>UploadImageAjax</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>UploadImage</servlet-name>
<url-pattern>/ajax/uploadimage</url-pattern>
</servlet-mapping>
</web-app>

4.需要注意的地方需要jquery的支援：jquery-1.11.1.min.js 需要servlet的支援：servlet-api.jar 需要Base64解碼支援：sun.misc.BASE64Decoder。引入這個包eclipse可能會報錯，請按照http://blog.csdn.net/hurryjiang/article/details/6958146進行處理。

描述: 上傳圖片的project
下載次數: 2

http://www.thinksaas.cn/topics/0/348/348211.html

JS 實現上傳照片到伺服器和後臺處理處理這個照片

1.js進行圖片預覽使用input標籤來選擇圖片，使用FileReader讀取圖片並轉成base64編碼，然後傳送給伺服器。 <html> <body> <img id="image"src=""/> <br/> &l

js實現上傳圖片並顯示的兩種實現方式(無需上傳到伺服器再顯示)

方法一： <input type='file' id='chooseFile'> <img src='' id='picToCheck'/> document .querySelector('#chooseFile'

純 js 實現上傳文件支持拖拽

add prevent .get target TP isp div tps drag 開發「bufpay.com 個人即時到賬收款平臺」後臺需要支持開發者的微信和支付寶二維碼上傳。 <p> <button class="btn btn-prima

JS實現上傳圖片預覽功能

js實現上傳圖片預覽功能思路是獲取上傳圖片本地路徑，再載入到頁面中實現上傳預覽 HTML程式碼 <div class="upload"> <input type="button" class="btn" onclick=

js實現上傳圖片實時預覽

前段時間在網路上找的程式碼，修改了一部分用在了專案裡。原部落格地址找不到了，如果原作者看到的話留言我，將於第一時間刪除。 //js本地圖片預覽，相容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3 function Prev

js實現上傳圖片事實預覽

html部分 <img alt="" id="img" > <input type="file" onchange='PreviewImage(this)' >

web專案上傳到伺服器和連線資料庫的一些細節

最近把web專案上傳到伺服器遇到了很多麻煩,解決方法自己整理下. 1,web專案打包在myeclipse的專案上點選右鍵,選擇Export...(匯出),然後如圖選擇點選Next 點選Browse選擇要匯出到哪裡,然後點選Finish即可. 2.連線伺服器的工

js:實現上傳圖片即時預覽

圖片上傳即時預覽是很多地方都用的上的抽空封裝了一段即時預覽程式碼 function setImagePreview(avalue) { //獲取預覽按鈕 va

基於asp.net + easyui框架，js實現上傳圖片之前判斷圖片格式，同時實現預覽，相容各種瀏覽器+下載

最近在做圖片上傳的一個前臺頁面，上傳圖片功能雖然很簡單，但是需要我們學習的地方很多。在上傳圖片之前驗證圖片的格式，並同時實現預覽。這篇部落格我們就用一段簡單的js程式碼來實現驗證圖片格式，並同時預覽的功能。 html頁面 <div> 選

js實現上傳圖片預覽，購物車加減

js效果（一）：上傳的圖片預覽 $("#path").change(function(){ var objUrl = getObjectURL(this.files[0]) ; console.log("objUrl = "+objUrl) ; if (ob

js實現上傳圖片轉成beats64

nbsp com title tel cti 實現 accep val reader <!DOCTYPE html> <html> 　　<head> 　　　　<meta charset="UTF-8"> 　　　　<ti

asp.net+js實現上傳圖片即時預覽

今天師兄又好好的給我演示了一個小小的提高使用者體驗的小功能，上程式碼 <title></title> <script type="text/javascript"><!-- function imgprew(

Java開發公眾號系列教程(一)：微信js-sdk上傳照片相容IOS和安卓裝置

很多開發者朋友在進行微信公眾號開發時，遇到微信js-sdk上傳手機相簿照片時IOS裝置無法正常預覽的情況，今天筆者結合多年的開發經驗，把相容IOS的解決方案分享給廣大微信開發者朋友。微信最新版本JSSDK文件地址https://mp.weixin.qq.com/advanced/wiki

Java開發公眾號系列教程(一)：微信js-sdk上傳手機相簿照片相容IOS和安卓裝置

很多開發者朋友在進行微信公眾號開發時，遇到微信js-sdk上傳手機相簿照片時IOS裝置無法正常預覽的情況，今天筆者結合多多年的開發經驗，把相容IOS的解決方案分享給廣大微信開發者朋友。一、首先申明一點筆者本案例用的微信JSSDK版本是1.2.0的，官方文件給出的最

基於HTML5+js+Java實現單檔案檔案上傳到伺服器功能

HTML5程式碼：方法一：直接表單提交 1 2 3 4 5 6 <form name="upform" action="url" method="POST"> &n

純前端實現上傳圖片到本地或伺服器，並根據時間建立資料夾，無需後臺

1.我們平時接觸到的介面都是後臺需要你給他傳遞幾個引數，你就把引數對應的值給他們就行了 $.ajax({ type: "get", url: URl, dataType: "json", data:{ 'page':'0'

Android調取系統相簿和相機照片設定到ImageView並上傳到伺服器

網上的這類答案很多,不同的手機也會出現不同的情況,自己每次做這個功能都要掉進去很多次坑,分享給大家,也自己做一個筆記話不多先看下效果程式碼開始: 首先定義一個 PopupW

python實現獲取電腦和嵌入式裝置(樹3)IP、主機名、Mac地址，並把這些資訊上傳雲伺服器。

import socket import uuid # 獲取主機名 hostname = socket.gethostname() #獲取IP ip = socket.gethostbyname(hostname) # 獲取Mac地址 def get_mac_address

java利用jcraft實現和遠端伺服器互動，實現上傳下載檔案

git地址：https://github.com/fusugongzi/upLoadAndDownloadFile 第一步：引入maven支援，新增maven依賴 <!-- https://mvnrepository.com/artifact/com.jcraft

JSP實現檔案上傳下載和刪除（附:JS獲取上傳檔案的檔名）

1.檔案上傳直接複製專案了，你們有需要的自己看著改吧表單部分截圖（新增分類按鈕可忽略） jsp頁面html部分 <form action="" id="form" enctype="multipart/form-data" method="post">

JS 實現上傳照片到伺服器 和 後臺處理處理這個照片

相關推薦

JS 實現上傳照片到伺服器和後臺處理處理這個照片