移動端多圖上傳，支持ios、android、pc。

本文轉載自查看原文 2017-03-28 16:42 1574

首先，操練了很久這個功能，差點給我干廢，終於搞好了，所以給大家分享一下，之前找了很多例子參考，但是均有些問題，所以把我這個成品發上來。（也有很多摘錄別人的）。

然后，現在網上很多例子都是半成品或者是不靠譜的，我搜索很多頗有感觸，太坑人了，我這個是成品直接發上來經過測試，沒問題，pc端也可以用。安卓ios都可以選擇多少張圖片上傳。

后台：java （SSH）

前台：h5 js （有個jquery的jar包需要引入）

這里分享幾張成品效果圖把。

這里是手機上傳的，

pc端可以拖拽到里面，也可以上傳，點擊選取文件時自動找file 。h5自帶功能，手機直接提示找相冊或者拍照or視頻。然后選取即可。

/**

* 這里我先把html 懟上來，放在pc頁面可以拖拽，放在手機就不能拖拽了，我給刪掉了，若有需要自己再加吧。移動端沒有拖拽

* ~~要注意：form表單里的action。我加了注釋了在上面一行。（ps：就一個斜杠“/” ，我搞了一個星期不知道哪里出的錯。。。很尷尬，主要是沒有錯誤信息）

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>圖片上傳 </title>
</head>

<link rel="stylesheet" href="css/demo.css" type="text/css" />
<style>
.upload_box{width:800px; margin:1em auto;}
.upload_choose{padding:1em;}
.upload_drag_area{display:inline-block; width:60%; padding:4em 0; margin-left:.5em; border:1px dashed #ddd; background:#fff url(./drag.png) no-repeat 20px center; color:#999; text-align:center; vertical-align:middle;}
.upload_drag_hover{border-color:#069; box-shadow:inset 2px 2px 4px rgba(0, 0, 0, .5); color:#333;}
.upload_preview{border-top:1px solid #bbb; border-bottom:1px solid #bbb; background-color:#fff; overflow:hidden; _zoom:1;}
.upload_append_list{height:300px; position:relative;}
.upload_delete{margin-left:2em;}
.upload_image{max-height:250px; padding:5px;}
.upload_submit{padding-top:1em; padding-left:1em;}
.upload_submit_btn{display:none; height:32px; font-size:14px;}
.upload_loading{height:250px; background:url(/study/image/preload.gif) no-repeat center;}
.upload_progress{display:none; padding:5px; border-radius:10px; color:#fff; background-color:rgba(0,0,0,.6); position:absolute; left:25px; top:45px;}
</style>

<body>

<div id="main">
<div id="body" class="light">
<div id="content" class="show">
<h3>展示</h3>
<div class="demo">    <!--本地測試 api前面不加/ --api/CarloandApply.action -->
<form id="uploadForm" action="/api/CarloandApply.action" method="post" enctype="multipart/form-data"><!--api/CarloandApply -->
<div class="upload_box">
<div class="upload_main">
<div class="upload_choose">
<font color="#ff8080"><input type="file" id="fileImage" size="30" name="file" multiple=""></font><!-- 原name=fileselect[] -->
<!-- <span id="fileDragArea" class="upload_drag_area">或者將圖片拖到此處</span> 不注釋即可用拖拽功能 （搭配js）-->
<br/>
<input type="text" name="sessionid1" id="setSessid" value="" />
<input type="text" name="cno1" id="setCno" value=""/> 
</div>
<div id="preview" class="upload_preview"></div>
</div>
<div class="upload_submit">
<button type="button" id="fileSubmit" class="upload_submit_btn">確認上傳圖片</button>
</div>
<div id="uploadInf" class="upload_inf"></div>
</div> 
</form>
</div>
</div>
</div>
</div>

<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/zxxFile.js"></script>
<script src="js/mui.min.js "></script>
<script src="js/appconfig.js" type="text/javascript" charset="utf-8"></script>
<script>

var params = {
fileInput: $("#fileImage").get(0),
dragDrop: $("#fileDragArea").get(0),
upButton: $("#fileSubmit").get(0),
url: $("#uploadForm").attr("action"),
filter: function(files) {
var arrFiles = [];
for (var i = 0, file; file = files[i]; i++) {
if (file.type.indexOf("image") == 0) {
if (file.size >= 2560000) {
alert('您這張"'+ file.name +'"圖片大小過大，應小於2.5MB');    
} else {
arrFiles.push(file);    
}    
} else {
alert('文件"' + file.name + '"不是圖片。');    
}
}
return arrFiles;
},
onSelect: function(files) {
//得到id
//var sessionid=localStorage.getItem("sessionid");
//把id賦值到input 
//$('#setSessid').val(sessionid);
//得到Cno
//var cno=localStorage.getItem("cno");
//把cno賦值到input 
//$('#setCno').val(cno);
var html = '', i = 0;
$("#preview").html('<div class="upload_loading"></div>');
var funAppendImage = function() {
file = files[i];
if (file) {
var reader = new FileReader()
reader.onload = function(e) {
html = html + '<div id="uploadList_'+ i +'" class="upload_append_list"><p><strong>' + file.name + '</strong>'+ 
'<a href="javascript:" class="upload_delete" title="刪除" data-index="'+ i +'">刪除</a><br />' +
'<img id="uploadImage_' + i + '" src="' + e.target.result + '" class="upload_image" /></p>'+ 
'<span id="uploadProgress_' + i + '" class="upload_progress"></span>' +
'</div>';

i++;
funAppendImage();
}
reader.readAsDataURL(file);
} else {
$("#preview").html(html);
if (html) {
//刪除方法
$(".upload_delete").click(function() {
ZXXFILE.funDeleteFile(files[parseInt($(this).attr("data-index"))]);
return false;
});
//提交按鈕顯示
$("#fileSubmit").show();    
} else {
//提交按鈕隱藏
$("#fileSubmit").hide();    
}
}
};
funAppendImage();    
},
onDelete: function(file) {
$("#uploadList_" + file.index).fadeOut();
},
onDragOver: function() {
$(this).addClass("upload_drag_hover");
},
onDragLeave: function() {
$(this).removeClass("upload_drag_hover");
},
onProgress: function(file, loaded, total) {
var eleProgress = $("#uploadProgress_" + file.index), percent = (loaded / total * 100).toFixed(2) + '%';
eleProgress.show().html(percent);
},
onSuccess: function(file, response) {
$("#uploadInf").append("<p>上傳成功</p>");

},
onFailure: function(file) {
$("#uploadInf").append("<p>圖片" + file.name + "上傳失敗！</p>");    
$("#uploadImage_" + file.index).css("opacity", 0.2);
},
onComplete: function() {
//提交按鈕隱藏
$("#fileSubmit").hide();
//file控件value置空
$("#fileImage").val("");
$("#uploadInf").append("<p>當前圖片全部上傳完畢，可繼續添加上傳。</p>");
}
};
ZXXFILE = $.extend(ZXXFILE, params);
ZXXFILE.init();


</script>

</body>
</html>

/**

* 這里是 js的，是從網上一個大神手里拿下來的框架，大神自己編寫的。很厲害。舊式ajax。我也看不明白，但知道大概意思

* 要注意的是下方formdata來append追加的，不然后台file是null 。這里搞了很久。查閱了很多。

/*
* zxxFile.js 基於HTML5 文件上傳的核心腳本 http://www.zhangxinxu.com/wordpress/?p=1923
* by zhangxinxu 2011-09-12
*/

var ZXXFILE = {
fileInput: null,    //html file控件
dragDrop: null,    //拖拽敏感區域
upButton: null,    //提交按鈕
url: "",    //ajax地址
fileFilter: [],    //過濾后的文件數組
filter: function(files) {    //選擇文件組的過濾方法
return files;    
},
onSelect: function() {},    //文件選擇后
onDelete: function() {},    //文件刪除后
onDragOver: function() {},    //文件拖拽到敏感區域時
onDragLeave: function() {},    //文件離開到敏感區域時
onProgress: function() {},    //文件上傳進度 
onSuccess: function() {},    //文件上傳成功時
onFailure: function() {},    //文件上傳失敗時,
onComplete: function() {},    //文件全部上傳完畢時

/* 開發參數和內置方法分界線 */

//文件拖放
funDragHover: function(e) {
e.stopPropagation();
e.preventDefault();
this[e.type === "dragover"? "onDragOver": "onDragLeave"].call(e.target);
return this;
},
//獲取選擇文件，file控件或拖放
funGetFiles: function(e) {
// 取消鼠標經過樣式
this.funDragHover(e);

// 獲取文件列表對象
var files = e.target.files || e.dataTransfer.files;
//繼續添加文件
this.fileFilter = this.fileFilter.concat(this.filter(files));
this.funDealFiles();
return this;
},

//選中文件的處理與回調
funDealFiles: function() {
for (var i = 0, file; file = this.fileFilter[i]; i++) {
//增加唯一索引值
file.index = i;
}
//執行選擇回調
this.onSelect(this.fileFilter);
return this;
},

//刪除對應的文件
funDeleteFile: function(fileDelete) {
var arrFile = [];
for (var i = 0, file; file = this.fileFilter[i]; i++) {
if (file != fileDelete) {
arrFile.push(file);
} else {
this.onDelete(fileDelete);    
}
}
this.fileFilter = arrFile;
return this;
},

//文件上傳
funUploadFile: function() {
var self = this;    
if (location.host.indexOf("sitepointstatic") >= 0) {
//非站點服務器上運行
return;    
}
for (var i = 0, file; file = this.fileFilter[i]; i++) {
(function(file) {
var xhr = new XMLHttpRequest();
if (xhr.upload) {
// 上傳中
xhr.upload.addEventListener("progress", function(e) {
self.onProgress(file, e.loaded, e.total);
}, false);
// 文件上傳成功或是失敗
xhr.onreadystatechange = function(e) {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
alert("成功圖片="+xhr.status);
self.onSuccess(file, xhr.responseText);
self.funDeleteFile(file);
if (!self.fileFilter.length) {
//全部完畢
self.onComplete();    
}
} else {
alert("失敗圖片="+xhr.status);
self.onFailure(file, xhr.responseText);    
}
}
};
// 開始上傳
xhr.open("POST", self.url, true);    
xhr.setRequestHeader("X_FILENAME", encodeURIComponent(file.name));
var formdata = new FormData(); //轉換成formdata    ,后台才可接收 
//formdata.append("cno",88888);    //測試時候，88888為文件夾名字 
//$('#setSessid').val(localStorage.getItem('sessionid')); 
//$('#setCno').val(localStorage.getItem('cno'));
//alert($('#setSessid').val());
formdata.append("sessionid",localStorage.getItem('sessionid')); // $('#setSessid').val()
formdata.append("cno",localStorage.getItem('cno')); //$('#setCno').val()
formdata.append("file",file);    
formdata.append("fname",file.name);
alert("這里是formdata="+localStorage.getItem('sessionid'));//因為是手機上傳，localStorage.getItem('sessionid')只能在手機使用 
xhr.send(formdata);
//xhr.send(file);
}    
})(file);    
}    
},

init: function() {
var self = this;

if (this.dragDrop) {
this.dragDrop.addEventListener("dragover", function(e) { self.funDragHover(e); }, false);
this.dragDrop.addEventListener("dragleave", function(e) { self.funDragHover(e); }, false);
this.dragDrop.addEventListener("drop", function(e) { self.funGetFiles(e); }, false);
}

//文件選擇控件選擇
if (this.fileInput) {
this.fileInput.addEventListener("change", function(e) { self.funGetFiles(e); }, false);    
}

//上傳按鈕提交
if (this.upButton) {
this.upButton.addEventListener("click", function(e) { self.funUploadFile(e); }, false);    
} 
}
};

/**

* 接下來是最主要后台，用於提交的，走的是struts2提交的，配置等會在最后我發一下，就幾句話。

* 這里要注意的：注釋的一堆logger請無視，當時測試打印log費死勁了，因為我不是專門做手機的，比較業余，沒有連上真機測試的軟件，所以這里也不報錯，也顯示提交成功，也沒啥問題。搞了很久

package com.yxd.api.action;

import java.io.Console;
import java.io.File;
import java.io.IOException;
import java.text.Format;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;


import javax.annotation.Resource;
import javax.servlet.http.HttpSession;

import org.apache.commons.io.FileUtils;
import org.apache.commons.logging.impl.Log4JLogger;
import org.apache.struts2.ServletActionContext;
import org.junit.runner.Request;

import org.apache.log4j.Logger;
import com.opensymphony.xwork2.ActionContext;
import com.yxd.api.wervice.MySessionContext;
import com.yxd.common.base.BaseAction;
import com.yxd.common.utils.Guid;
import com.yxd.manage.model.AgentApply;
import com.yxd.manage.model.LoanApplyImgfile;
import com.yxd.manage.model.ProductLoandApply;
import com.yxd.manage.model.YxdNews;
import com.yxd.manage.model.YxdUser;
import com.yxd.manage.model.YxdUseraccount;
import com.yxd.manage.service.AgentApplyService;
import com.yxd.manage.service.LoanApplyImgfileService;
import com.yxd.manage.service.ProductLoandApplyService;
import com.yxd.manage.service.YxdUserService;
import com.yxd.web.action.RegistAction;

public class ApiLoandApply extends BaseAction{

//log
private Logger logger = Logger.getLogger(ApiLoandApply.class);
//public static org.apache.log4j.Logger log= org.apache.log4j.Logger.getLogger("ApiLoandApply.class");

private SimpleDateFormat sdF=new SimpleDateFormat("yyyyMMdd");

@Resource
private YxdUserService yxdUserService;
@Resource
private LoanApplyImgfileService loanApplyImgfileService;
@Resource
private ProductLoandApplyService productLoandApplyService;
@Resource
private AgentApplyService agentApplyService;

private Object rest;
private String sessionid;    //用戶id
private String cguid; 
private String cno;    //文件夾編號
private int istutas;    //0 待檢查 1正在審核 2審核通過 3 審核失敗
private Date cuploaddate;//上傳時間
private Date chickdate; //審核時間
private YxdUser cuserid; //用戶id(代理人）

private File file;// 實際上傳文件
private String[] uploadContentType; // 文件的內容類型
private String[] uploadFileName; // 上傳文件名

// 上面這些屬性，有很多是別的方法的，在這里我把別的方法給刪掉了，但是上面沒有刪，
/**
* 車貸代理人 上傳車貸圖片 
* @throws IOException 
* */
public String carloandApply(){
//    logger.debug("debug進的方法");
//    logger.info("info進的方法");
//獲取當前用戶id
String cuserguid=null;
if(sessionid!=null&&sessionid.trim().length()>0){
logger.debug("sessionid="+sessionid);
HttpSession Sess = MySessionContext.getSession(sessionid);
if(Sess!=null){
YxdUser yu=(YxdUser)Sess.getAttribute("yxdUser");
if(yu!=null&&yu.getCguid()!=null&&yu.getCguid().length()>0){
cuserguid=yu.getCguid();
}
}
} 
//logger.error(this.httpSession.getAttribute("sessionid"));
//    String cGuid = Guid.newGuid();//生成ID
//String cuserguid = httpServletRequest.getParameter("sessionid");
if(cuserguid!=null&&cuserguid.trim().length()>0){
String sqla="select cguid,'' from product_loand_apply where cuserguid='"+cuserguid+"'";
List<Object[]> listms=agentApplyService.queryBySql(sqla);
if(listms!=null&&listms.size()>0){ 
String cid=agentApplyService.queryBySql(sqla).get(0)[0].toString();//得到cguid
//圖片上傳 
//String realpath = ServletActionContext.getServletContext().getRealPath("/"+"applyimg");//獲取服務器路徑 getRealPath("http://youxiandai.cn/applyimg")
if(file!=null){ //原 upload!=null
//    logger.debug("file="+file);
//    logger.info("file="+file);
File target = new File( this.servletContext.getRealPath("/")+"applyimg/"+httpServletRequest.getParameter("cno"));//原realpath 

//    logger.debug("target="+target);
//logger.info("target="+target);
if(!target.exists()){    //判斷有沒有文件夾
target.mkdirs();    //新建target文件夾
}
File savefile = new File(target+"/"+httpServletRequest.getParameter("fname"));//服務器路徑+圖片名字

//    logger.debug("savefile="+savefile);
//    logger.info("savefile="+savefile);
try{
FileUtils.copyFile(file, savefile); //把file文件，復制到savefile路徑里 
}catch(Exception e){
e.printStackTrace();
}
rest=1;//保存成功
//ActionContext.getContext().put("message","文件上傳成功");
}else{
rest=2; //沒有圖片 
}
}
}else{
rest=4;//未登錄
}
return SUCCESS;
}



public String getSessionid() {
return sessionid;
}

public void setSessionid(String sessionid) {
this.sessionid = sessionid;
}

public String getCguid() {
return cguid;
}

public void setCguid(String cguid) {
this.cguid = cguid;
}

public String getCno() {
return cno;
}

public void setCno(String cno) {
this.cno = cno;
}

public String getImgurl() {
return imgurl;
}

public void setImgurl(String imgurl) {
this.imgurl = imgurl;
}

public int getIstutas() {
return istutas;
}

public void setIstutas(int istutas) {
this.istutas = istutas;
}

public Date getCuploaddate() {
return cuploaddate;
}

public void setCuploaddate(Date cuploaddate) {
this.cuploaddate = cuploaddate;
}

public Date getChickdate() {
return chickdate;
}

public void setChickdate(Date chickdate) {
this.chickdate = chickdate;
}

public YxdUser getCuserid() {
return cuserid;
}

public void setCuserid(YxdUser cuserid) {
this.cuserid = cuserid;
}

public Object getRest() {
return rest;
}

public void setRest(Object rest) {
this.rest = rest;
}

 

public File getFile() {
return file;
}

 

public void setFile(File file) {
this.file = file;
}

 

 


public ProductLoandApply getNo() {
return no;
}

 

public void setNo(ProductLoandApply no) {
this.no = no;
}

 

public LoanApplyImgfile getCnoid() {
return cnoid;
}

 

public void setCnoid(LoanApplyImgfile cnoid) {
this.cnoid = cnoid;
}

 

public String getCuserno() {
return cuserno;
}

 

public void setCuserno(String cuserno) {
this.cuserno = cuserno;
}

 

public String[] getUploadContentType() {
return uploadContentType;
}

 

public void setUploadContentType(String[] uploadContentType) {
this.uploadContentType = uploadContentType;
}

 

public String[] getUploadFileName() {
return uploadFileName;
}

 

public void setUploadFileName(String[] uploadFileName) {
this.uploadFileName = uploadFileName;
}



}

/**

* struts2 的配置啦，幾句話

* ~~

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">
<struts>
<package name="carloandApplyApi" namespace="/api" extends="struts2" >

<!-- 車貸信息圖片提交-->
<action name="CarloandApply" class="項目地址" method="carloandApply">
<result name="success" type="json">
<param name="root">rest</param>
</result>
</action>

</package>


</struts>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 .net：上傳圖片並將保存至指定目錄下（支持PC端和移動端） css兼容3、不同設備的樣式兼容性問題（移動端與pc、ios與android） js實現頭像上傳（移動端，PC端均可） HTML5網頁錄音和上傳到服務器，支持PC、Android，支持IOS微信 js 滑塊 slider 支持PC和移動端制作甘特圖用支持pc和移動端的手寫簽批功能【vue】vue +element 搭建項目，要求既支持pc端又支持移動端如何讓C/S應用支持多端（PC、Android、iOS）同時登錄？ web移動端區分Android或者ios系統 pc端和移動端的區別