SSM使用ajax實現圖片上傳與刪除功能
圖片上傳與刪除
之前寫了一篇部落格記錄了關於修改資料中的圖片上傳 （傳送門），這次用到了直接上傳圖片的功能，對上一篇部落格進行了簡單的優化與改進。
改進問題：
- 之前刪除該資料時，僅僅刪除了資料庫中的資料，而專案下面的圖片檔案仍然存在，這就導致以後即使資料庫清空之後，專案資料夾下刪除的圖片記錄仍然存在的問題。
- 直接使用ajax上傳圖片。
1.上傳檔案
下面貼一下程式碼：
<button type="button" onclick="newPicture()" 由於頁面使用了bootscript，CSS功底不好，顯得頁面比較亂，湊合先用著了
<!-- 新增圖片 -->
<div id="tanchuang-tab">
<div class="tanchuang-tab">
<!-- <form id="updateForm"> -->
<form class="form-horizontal over-hd" role="form" id=" js部分：（頁面可以參考上面的傳送連線裡的部落格，比較清晰（傳送門））
//下面用於圖片上傳預覽功能
function setImagePreview(avalue) {
var docObj = document.getElementById("inputFile");
var imgObjPreview = document.getElementById("preview");
if (docObj.files && docObj.files[0]) {
//火狐下，直接設img屬性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '100px';
imgObjPreview.style.height = '100px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式獲取，需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
} else {
//IE下，使用濾鏡
docObj.select();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("localImag");
//必須設定初始大小
localImagId.style.width = "150px";
localImagId.style.height = "180px";
//圖片異常的捕捉，防止使用者修改後綴來偽造圖片
try {
localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters
.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
} catch (e) {
alert("您上傳的圖片格式不正確，請重新選擇!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
return true;
}
// 點選確認按鈕觸發
$('#btn-submit3').click(function() {
var owner = $('#selectOwner option:selected').val(); // 獲取下拉框裡選中的值
$("#pOwner").val(owner);
var fileObj = document.getElementById("inputFile").files[0]; // js 獲取檔案物件
if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {
alert("請選擇上傳的圖片！");
return;
}
var formFile = new FormData();
formFile.append("pOwner", owner);
formFile.append("file", fileObj);
var data = formFile;
$.ajax({
url : 'picture/insertPicture.do',
type : 'post',
dataType : 'json',
data : data,
cache: false, //上傳檔案無需快取
processData: false, // 用於對引數進行序列化處理，這裡必須設為false
contentType:false, // 必須
success : function(data) {
console.log(data);
if (data.state == 200) {
alert(data.message);
var to = "${pageContext.request.contextPath}/picture/pictureList.do";
doPost(to);
}
if(data.state == 300){
alert("圖片上傳失敗！");
return;
}
}
});
});
$('#btn-cancel3').click(function() {
console.log("2222");
$("#selectOwner").find("option").remove();
//var name = $("#inputFile").val();
//$("#inputFile").val(null);
//$("#preview").src(null);
var obj = document.getElementById('inputFile') ;
obj.outerHTML=obj.outerHTML;
$('#tanchuang-tab').hide();
});
// 使用post提交訪問請求
function doPost(to){
//to為跳轉連結
var myForm = document.createElement("form");
myForm.method = "post";
myForm.action = to;
document.body.appendChild(myForm); //
myForm.submit();
document.body.removeChild(myForm); // 提交後移除建立的form
}
使用ajax提交表單可能都不陌生了，但是當表單裡存在檔案時，ajax普通的寫法就會報錯了，這裡的寫法是參考網上的資料整理的，
這裡利用FormData物件來將資料封裝起來，其中pOwner是from裡提交的另一個引數
var formFile = new FormData();
formFile.append("pOwner", owner);
formFile.append("file", fileObj);
在ajax中processData: false必須false才會避開jQuery對 formdata 的預設處理
java後臺的東西
我這裡將初始檔名也儲存到資料庫裡了，picture_url裡存的是圖片的路徑和名稱，這是存在了專案根目錄的upload資料夾下面了。
在展示的時候，展示的圖片名稱是上傳的檔名，而圖片的顯示卻不能用檔名來顯示，因為上傳的檔案如果出現重名的的話，將影響圖片的回顯。這裡我使用UUID給圖片重新命名，或者使用MD5對當前時間進行加密，然後取值作為圖片名稱，這樣圖片就可以避免重名的問題了。每張圖片都是唯一標識的。
首先是Controller類：
@RequestMapping("insertPicture")
@ResponseBody
public JsonResult<String> insertPicture(@RequestParam(value="file")MultipartFile pictureFile,HttpServletRequest request, String pOwner) throws IOException{
System.out.println("pOwner:" + pOwner);
// pictureURL是資料庫裡picture_url的值，這裡用到一個封裝的工具類UploadUtil
String pictureURL= UploadUtil.imageUpload(pictureFile, request);
System.out.println("pictureURL:" + pictureURL);
//獲取上傳時的檔名
String pictureName = FilenameUtils.getName(pictureFile.getOriginalFilename());
System.out.println("pictureName:" + pictureName);
// 把圖片資料儲存到資料庫
Picture picture = new Picture();
picture.setPictureName(pictureName);
picture.setPictureUrl(pictureURL);
picture.setPictureOwner(pOwner);
int insert = pictureService.insert(picture);
if (insert > 0 && pictureURL != "") {
return new JsonResult<>(200, "上傳成功!", null);
}
return new JsonResult<>(300, "上傳失敗", null);
}
上傳檔案工具類：UploadUtil.java
import java.io.File;
import java.io.IOException;
import java.util.UUID;
import javax.servlet.http.HttpServletRequest;
import org.apache.commons.io.FilenameUtils;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;
public class UploadUtil {
public static String imageUpload(@RequestParam(value="file") MultipartFile file,HttpServletRequest req){
// 獲取要上傳的目標位置，即是專案的upload資料夾所在的絕對路徑
String path = req.getSession().getServletContext().getRealPath("upload");
// 獲取檔案的副檔名
String ext = FilenameUtils.getExtension(file.getOriginalFilename());
String filename = UUID.randomUUID().toString().replaceAll("-", "")+"."+ ext;
// 寫入檔案成功之後，返回的資料，也就是資料庫裡要存的檔案的url
String src="upload/"+filename;
File targetFile= new File(path,filename);
try {
if(!targetFile.exists()){
//寫入檔案
file.transferTo(targetFile);
}
return src;
} catch (IllegalStateException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
//寫入檔案失敗，則返回空字串
return "";
}
}
返回的JSON工具類：JsonResult.java
import java.io.Serializable;
/**
* 用於封裝伺服器到客戶端的Json返回值
*
* @author soft01
*
*/
public class JsonResult<T> implements Serializable {
// Serializable將物件的狀態儲存在儲存媒體中以便可以在以後重新創建出完全相同的副本
public static final int SUCCESS = 0;
public static final int ERROR = 1;
public static final int OTHER = 2;
private int state;
private String message = "";
private T data;
private String pass = "";
public JsonResult() {
state = SUCCESS;
}
// 為了方便，過載n個構造器
public JsonResult(int state, String message, T data) {
super();
this.state = state;
this.message = message;
this.data = data;
}
public JsonResult(int state, String error) {
this(state, error, null);
}
public JsonResult(int state, T data) {
this(state, "", data);
}
public JsonResult(String error) {
this(ERROR, error, null);
}
public JsonResult(T data) {
this(SUCCESS, "", data);
}
public JsonResult(int state) {
this(state, "", null);
}
public JsonResult(Throwable e) {
this(ERROR, e.getMessage(), null);
}
public int getState() {
return state;
}
public void setState(int state) {
this.state = state;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
相關推薦
SSM使用ajax實現圖片上傳與刪除功能
圖片上傳與刪除
1.上傳檔案
2.刪除資料，並且刪除對應的檔案
之前寫了一篇部落格記錄了關於修改資料中的圖片上傳
（傳送門），這次用到了直接上傳圖片的功能，對上一篇部落格進行了簡單的優化與改進。
改進問題：
之前刪除該資料時
struts2實現檔案上傳與下載功能
一、Demo介紹
基於struts2框架，實現多檔案的上傳和下載功能。 實現原理圖： 部分介面圖： 上傳成功及下載頁面：
二、主要程式碼
uploadFile.jsp:在form表單中包含一個文字框（上傳使用者的姓名）和兩個檔案上傳選項.
<%@
Thinkphp實現檔案上傳與刪除
新增前：
新增後：
刪除後：
程式碼：
1.html
<tr>
<td style="width: 100px;text-align: right">
附件：
用SpringMVC框架實現圖片上傳與下載
1、新建一個Maven webapp專案，引入需要用的夾包，pom.xml檔案的依賴包如下：
<dependencies>
<!-- 用於生成圖片的縮圖 -->
<dependency>
<g
HTML5+Canvas+jQuery調用手機拍照功能實現圖片上傳（二）
customer mkdir 狀態保存 ont false lan else if 項目 action
上一篇僅僅講到前臺操作，這篇專門涉及到Java後臺處理。前臺通過Ajax提交將Base64編碼過的圖片數據信息傳到Java後臺，然後Java這邊進行接收處理。通過
elementUI+koa實現圖片上傳功能
elementUI中的上傳元件為： 大家可以先在自己的專案中執行一下餓了麼上傳元件
<el-upload
action="https://jsonplaceholder.typicode.com/posts/"
list-type="picture-card"
:o
5行程式碼實現微信小程式圖片上傳與騰訊免費5G儲存空間的使用
本文介紹瞭如何在微信小程式開發中使用騰訊官方提供的雲開發功能快速實現圖片的上傳與儲存，以及介紹雲開發的 5G 儲存空間的基本使用方法，這將大大提高微信小程式的開發效率，同時也是微信小程式系列教程的視訊版更新的文字版本摘要。
此文為 「60 節實戰課微信小程式開發視訊教程」 的第 51 小節
CKEditor4.7之使用Java實現圖片上傳功能
1.官網下載CKEditor,基礎包，標準包，全包選擇其一。地址：https://ckeditor.com/ckeditor-4/download/
2.下載檔案後將其解壓至WebRoot資料夾下，解壓前可以新建一個包檔案FckEditor
3.開啟ckeditor\plugin
使用 MultipartFile 結合 （formData物件、Blob物件） 實現圖片上傳功能簡介
圖片上傳功能的具體實現（當然檔案也一樣）：
MultipartFile ，這個類可以完全接收到前臺傳過來的圖片資料。
MultipartFile 通過 MultipartFile .transferTo( new File()), 僅需要這步驟，就可以把圖片存到伺
js圖片上傳預覽功能相容實現
<html>
<head>
<title>js圖片上傳預覽</title>
<script>
function PreviewImage(imgFile)
{
var filextension=imgFile.value.subst
HTML5 APP應用實現圖片上傳及拍照上傳功能
HTMl5 APP手機端程式碼：
<video id="myVideo" autoplay="autoplay"></video>
<br />
<input type="button" value="拍照" />
AJAX實現圖片上傳和預覽（傳統ajax與jQuery AJAX；帶圖片的表單提交）
一、通過Servlet3.0和傳統的AJAX實現圖片上傳和預覽
此方法也適用於帶圖片的表單提交
上傳時預覽圖片
微信小程式實現圖片上傳功能
前端： 微信開發者工具
後端：.Net
伺服器：阿里雲
這裡介紹微信小程式如何實現上傳圖片到自己的伺服器上
前端程式碼
data: {
productInfo: {}
},
//上傳圖片
uploadImage: function () {
var that
layui實現圖片上傳 和 預覽功能
效果如下：
HTML 的程式碼：
<div class="box" style="width: 180px;float: left;">
<div class="layui-upload">
<div class="layui-ro
HTML5+Canvas+jQuery呼叫手機拍照功能實現圖片上傳（二）
上一篇只講到前臺操作，這篇專門涉及到Java後臺處理，前臺通過Ajax提交將Base64編碼過的圖片資料資訊傳到Java後臺，然後Java這邊進行接收處理，通過對圖片資料資訊進行Base64解碼，之後使用流將圖片資料資訊上傳至伺服器進行儲存，並且將圖片的路徑地址存進資料庫。
成功實現Django Admin圖片上傳與縮圖處理
經過一天的努力，終於實現了完全用Django的方式上傳圖片，並且可自動生成縮圖。過程是很鬱悶的，因為網上搜索到的東西大都不完全。只是給點明一下。比較全面點的參考文章是http://imtx.me/archives/693.html。不過按照這上面說的，做完後會提示錯誤，如下
Android開發：仿微信和QQ空間發說說相簿讀取、拍照、圖片裁剪和圖片上傳伺服器等功能的實現
第一步：新增依賴包：
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:23.2.1'
compile project('
React Native 使用react-native-image-picker庫實現圖片上傳功能
react-native-image-picker作為一個整合相機和相簿的功能的第三方庫，因為其使用相對簡單受到前端開發人員的喜愛。
react-native-image-picker使用
1， 首先,安裝下該外掛。
npm install rea
《React-Native系列》26、 ReactNative實現圖片上傳功能
在檢視ReactNative的官方文件的時候，你會發現其實Fackbook是沒有提供圖片上傳功能的。如果我們的專案裡需要使用圖片上傳（用JS 實現圖片上傳），那我們有沒有什麼辦法呢？解決方案：利用FormData物件,你可以使用一系列的鍵值對來模擬一個完整的表單,然後使用XM
Android開發：相簿讀取、拍照、圖片裁剪和圖片上傳伺服器等功能的實現
修改日誌
2016.05.12
之前的程式存在兩個問題：
1）從相簿選擇的圖片如果比較大，會失敗；
2）無法拍照上傳照片。
修改了這兩個bug，之前的程式碼已經被覆蓋掉了，留著太誤人子弟了。同時修改了一下標題和文章的文字描述
拍照示意
相簿示