js拖拽圖片/input上傳+form提交+ajax上傳到struts
阿新 • • 發佈：2019-02-12
效果展示：
1、html部分
<div class="input_part" type="text">
<div class="icon_search"></div>
<input type="text" name="input_text" id="input_text">
<button id="search_btn">搜尋</button>
<div class="openImg"></div>
</div>
<div class="image_part js_hide" input_part是搜尋那一欄，image_part是拖拽+上傳圖片那一塊。點選搜尋欄的相機按鈕（openImg），移除image_part的js_hide，才展示上傳圖片欄。（模仿百度搜索）
2、CSS部分
太多就不全寫了，一個心得，元件沒有放在想要的位置時，多試試position（absolute或relative）、display（inline-block）、left、right、margin等設定。
著重列一下“本地上傳圖片”的按鈕css。
.button_image{
position: relative 3、js部分
這裡只用到了jquery。
流程設定是：拖拽圖片或開啟檔案選擇器選擇圖片，這個操作完成的瞬間，就進行圖片上傳，得到返回值後將上傳的圖片，和返回的結果一起展示。
$(function() {
clickEvents();
});
function clickEvents(){
$('.openImg').bind('click',function(event) {
$(".image_part").removeClass("js_hide");
});
$('.image_close').bind('click',function(event) {
$(".image_part").addClass("js_hide");
});
//點選按鈕上傳
$(".button_image a").on("change","input[type='file']",function() {
//傳入的是this.files[0]
uploadImage(this.files[0]);
});
//拖拽上傳
new dragUpload({
dragBox : '#drag_image'
});
}
//參考github的兩篇開源，具體見文末連結
function dragUpload(obj){
var $dragBox = $(obj.dragBox),//jQuery物件
JdragBox = $dragBox[0];//原生物件
//阻止瀏覽器預設行。
$(document).on({
dragleave:function(e){//拖離
e.preventDefault();
},
drop:function(e){//拖後放
e.preventDefault();
},
dragenter:function(e){//拖進
e.preventDefault();
},
dragover:function(e){//拖來拖去
e.preventDefault();
}
});
var dropper = document.getElementById("drag_image");
dropper.ondragenter = function (e) {
$(".drag_image").css('background', "#ddd");
e.preventDefault();
};
dropper.ondragover = function (e) {
e.preventDefault();
};
dropper.ondragleave = function (e) {
$(".drag_image").css('background', "#eee");
e.preventDefault();
};
//攜帶目標釋放
JdragBox.addEventListener('drop',function(e){
var fileList = e.dataTransfer.files;//獲取檔案物件
//如果沒有檔案，直接結束方法
if( fileList.length <= 0 ){
return fasle;
}else{
uploadImage(fileList[0]);
//本文設定一次只上傳一個檔案，因此不管開啟多少個，都只取第一個
//如果想要拖拽多個檔案處理，可迴圈，具體見參考連結
}
},false);
}
//拖拽和點選按鈕通用的上傳方法
function uploadImage(fileObj){
var obj = fileObj,
fileType = fileObj.type,
fileSize = fileObj.size,
reader = new FileReader();
var maxSize = 20480;//上傳圖片的最大size，單位kb，此處換算的話就是20M
var reg = /(image)/;//判斷檔案型別的正則
//檢查型別
if( !reg.test( fileType ) ){
alert('不是正確的資料型別');
return false;
}
if( fileSize > maxSize*1024 ){
alert('素材大於了'+ maxSize +'KB');
return false;
}
//form！！！把obj放進去！！！
var form = new FormData();
form.append("file", obj);
$.ajax({
type : "post",
url : "act_GetImage",//我的struts中的action
data : form,
processData : false,
contentType : false,
success : function(data) {
//...這裡的內容下篇部落格說
//主要是獲得返回值（圖片連結）並展示
}
},
error : function(data) {
alert("提交失敗！");
}
});
}4、struts部分
總之這個專案裡目前用到了那麼多lib，我已經分不清哪些是這個功能用到的哪些是別個功能用到的了。
struts.xml用的萬用字元，具體百度。
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<constant name="struts.multipart.maxSize" value="20971520" />
<package name="thisKnowledge" extends="struts-default,json-default">
<action name="*_*" class="meiko.server.{2}"
method="{1}_{2}">
<result name="success" type="json">
<param name="root">actJson</param>
</result>
</action>
</package>
</struts>關於struts的內容前面應該寫過部落格了，結構是類似的。
package meiko.server;
import java.io.File;
import java.io.IOException;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import org.apache.commons.io.FileUtils;
import com.opensymphony.xwork2.ActionSupport;
public class GetImage extends ActionSupport {
/**
*
*/
private static final long serialVersionUID = 1L;
private File file;//這個file就是上傳的檔案，我猜可能是因為在formdata裡用了file標籤吧。
private String fileContentType;//然後這兩個不用人為設定就能取到值，就很迷
private String fileFileName;
private JSONArray actJson;
public String act_GetImage() throws Exception {
try {
String target = ("./upload/" + fileFileName);
File targetFile = new File(target);
//用這神奇的copyfile就可以把檔案放到指定位置了
FileUtils.copyFile(file, targetFile);
// 這裡應該是呼叫一個外部方法或介面，處理圖片，返回檢索結果。
// 因為只是個demo，所以就手寫返回值好了。
actJson = new JSONArray();
for(int i = 0;i<8;i++){
JSONObject json = new JSONObject();
json.put("path", "../imgs/0"+(i+1)+".jpg");
json.put("title", (i+1)+".jpg");
json.put("message", "this is message");
actJson.add(json);
}
return SUCCESS;
} catch (IOException e) {
e.printStackTrace();
return ERROR;
}
}
public File getFile() {
return file;
}
public void setFile(File file) {
this.file = file;
}
public String getFileContentType() {
return fileContentType;
}
public void setFileContentType(String fileContentType) {
this.fileContentType = fileContentType;
}
public String getFileFileName() {
return fileFileName;
}
public void setFileFileName(String fileFileName) {
this.fileFileName = fileFileName;
}
public JSONArray getActJson() {
return actJson;
}
public void setActJson(JSONArray actJson) {
this.actJson = actJson;
}
}嗯………………寫完以後發現並沒有< form >標籤什麼事，也許html裡的< form >標籤是可以刪掉的。