ajax圖片上傳java
1、使用form表單提交
但是這里要記得添加enctype屬性，這個屬性是指定form表單在向伺服器提交之前，對表單數據如何進行編碼。 文件域中的name="file"屬性的值，需要和後台接收的對象名一致，不然接收不到。
2、使用ajax提交文件
使用ajax提交首先引入jquery-form.js文件才能實現，接著使用上面的html代碼，加入以js則可以實現ajax提交文件。
3、使用FormData對象
4、後台接收文件，框架採用的Spring Boot 微服務框架，因為該框架搭建很方便所以採用這個框架寫例子。
② java接收ajax傳遞過來的圖片參數圖片參數
SpringMVC上傳首先需要在配置文件中配置文件解析器
<beanid="multipartResolver"class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<propertyname="defaultEncoding"value="UTF-8"/>
<!--指定所上傳文件的總大小不能超過200KB。注意maxUploadSize屬性的限制不是針對單個文件，而是所有文件的容量之和-->
<propertyname="maxUploadSize"value="200000"/>
</bean>
提交的form表單中需要包含enctype="multipart/form-data"
加上enctype後,Spring MVC的前端控制器會判斷是否是文件上傳, 自動轉換的
後台使用MultipartFile對象即可接收
可以直接form表單提交或者非同步上傳文件
③ 只通過本地圖片地址實現上傳圖片到客戶端功能（JAVA）不用彈出窗（file等）
使用ajax後台上傳，定時調用ajax（因為已知路徑）,
那麼就不需要任何操作。
④ Java中如何圖片非同步上傳
在java中要實現非同步上傳要提前做好准備，對於文件上傳，瀏覽器在上傳的過程中是將文件以流的形式提交到伺服器端的，如果直接使用Servlet獲取上傳文件的輸入流然後再解析裡面的請求參數是比較麻煩，所以一般選擇採用apache的開源工具common-fileupload這個文件上傳組件。
這個common-fileupload上傳組件的jar包可以去apache官網上面下載，也可以在struts的lib文件夾下面找到，struts上傳的功能就是基於這個實現的。
common-fileupload是依賴於common-io這個包的，所以還需要下載這個包。剩下的就是js文件的導入了，我導入了以下文件：
<script type="text/javascript" src="lib/Js/jquery.js"></script>
<script ltype="text/javascript" src="/js/ajaxfileupload.js"></script>
在頁面中的寫法：
div class="controls"><span class="btn green fileinput-button"><i class="icon-plus icon-white"></i>
<span>上傳照片</span>
<input id="fileToUpload" name="myfiles" type="file" onchange="upload()" title="上傳" /></span>
</div>function upload(){
$.ajaxFileUpload
(
{
url:'<%=basePath%>sysperson/uploadpic',
secureuri:false,
fileElementId:'fileToUpload',
dataType: 'text',
success: function (data, status)
{
document.all.mypic.src="<%=basePath%>uploads/" + data;
document.all.picpath.value = data;
}, error : function(data, status, e) {
alert(e);
}
});
}
⑤ java 使用 AjaxUpload.js 實現上傳文檔的時候需要注意哪些
ajax是無法提交文件的，所以在上傳圖片並預覽的時候，我們經常使用Ifame的方法實現看似非同步的效果。但是這樣總不是很方便的，AjaxFilleUpload.js對上面的方法進行了一個包裝，使得我們不用去管理Iframe的一系列操作，也不用影響我們的頁面結構，實現非同步的文件提交。
html:
復制代碼 代碼如下:
<input type="file" name="upload" hidden="hidden" id="file_upload" accept=".zip" />
js:
復制代碼 代碼如下:
$.ajaxFileUpload({
url:'${pageContext.request.contextPath}/Manage/BR_restorePic.action', //需要鏈接到伺服器地址
secureuri:false,
fileElementId:'file_upload', //文件選擇框的id屬性
dataType: 'text', //伺服器返回的格式，可以是json、xml
success: function (data, status) //相當於java中try語句塊的用法
{
$('#restoreDialog').html(data);
//alert(data);
},
error: function (data, status, e){ //相當於java中catch語句塊的用法
$('#restoreDialog').html("上傳失敗，請重試");
}
});
這個方法還會出現一個問題，就是input只能使用一次的問題，input第二次的onchange將不會被執行，這應該是與瀏覽器的有關，解決辦法就是替換這個input
像這樣：
復制代碼 代碼如下:
$('#file_upload').replaceWith('<input type="file" name="upload" hidden="hidden" id="file_upload" accept=".zip" />');
⑥ Java 中圖片上傳問題
e,伺服器可以用ServerSocket,客戶端用Socket
然後就
Socket s=new Socket...............
OutputStream out=s.getOutputStream();
File f=圖片文件;
FileInputStream in=new FileInputStream(f);
byte data[]=byte[1024];
int length=0;
while((length=in.read(data,0,1024))!=-1) out.write(data,0,length);
out.close();
in.close();
伺服器端
ServerSocket s=new ServerSocket...............
//accept.....
InputStream in=s.getInputStream();
File f=圖片文件;
FileOutputStream out=new FileOutputStream(f);
byte data[]=byte[1024];
int length=0;
while((length=in.read(data,0,1024))!=-1) out.write(data,0,length);
out.close();
in.close();
然後伺服器接到請求時(這個是Servlet)
PrintWriter writer=resp.getWriter(); //resp-->HttpServletResponse
....
writer.print("<img src=\"+圖片路徑+"\">");
That's all.
⑦ ajax如何 實現 文件上傳
程序說明
使用說明
實例化時，第一個必要參數是file控制項對象：
newQuickUpload(file);
第二個可選參數用來設置系統的默認屬性，包括
屬性: 默認值//說明
parameter:{},//參數對象
action:"",//設置action
timeout:0,//設置超時(秒為單位)
onReady:function(){},//上傳准備時執行
onFinish:function(){},//上傳完成時執行
onStop:function(){},//上傳停止時執行
onTimeout:function(){}//上傳超時時執行
還提供了以下方法：
upload：執行上傳操作；
stop：停止上傳操作；
dispose：銷毀程序。
varQuickUpload=function(file,options){
this.file=$$(file);
this._sending=false;//是否正在上傳
this._timer=null;//定時器
this._iframe=null;//iframe對象
this._form=null;//form對象
this._inputs={};//input對象
this._fFINISH=null;//完成執行函數
$$.extend(this,this._setOptions(options));
};
QuickUpload._counter=1;
QuickUpload.prototype={
//設置默認屬性
_setOptions:function(options){
this.options={//默認值
action:"",//設置action
timeout:0,//設置超時(秒為單位)
parameter:{},//參數對象
onReady:function(){},//上傳准備時執行
onFinish:function(){},//上傳完成時執行
onStop:function(){},//上傳停止時執行
onTimeout:function(){}//上傳超時時執行
};
return$$.extend(this.options,options||{});
},
//上傳文件
upload:function(){
//停止上一次上傳
this.stop();
//沒有文件返回
if(!this.file||!this.file.value)return;
//可能在onReady中修改相關屬性所以放前面
this.onReady();
//設置iframe,form和表單控制項
this._setIframe();
this._setForm();
this._setInput();
//設置超時
if(this.timeout>0){
this._timer=setTimeout($$F.bind(this._timeout,this),this.timeout*1000);
}
//開始上傳
this._form.submit();
this._sending=true;
},
//設置iframe
_setIframe:function(){
if(!this._iframe){
//創建iframe
variframename="QUICKUPLOAD_"+QuickUpload._counter++,
iframe=document.createElement($$B.ie?"<iframename=""+iframename+"">":"iframe");
iframe.name=iframename;
iframe.style.display="none";
//記錄完成程序方便移除
varfinish=this._fFINISH=$$F.bind(this._finish,this);
//iframe載入完後執行完成程序
if($$B.ie){
iframe.attachEvent("onload",finish);
}else{
iframe.onload=$$B.opera?function(){this.onload=finish;}:finish;
}
//插入body
varbody=document.body;body.insertBefore(iframe,body.childNodes[0]);
this._iframe=iframe;
}
},
//設置form
_setForm:function(){
if(!this._form){
varform=document.createElement('form'),file=this.file;
//設置屬性
$$.extend(form,{
target:this._iframe.name,method:"post",encoding:"multipart/form-data"
});
//設置樣式
$$D.setStyle(form,{
padding:0,margin:0,border:0,
backgroundColor:"transparent",display:"inline"
});
//提交前去掉form
file.form&&$$E.addEvent(file.form,"submit",$$F.bind(this.dispose,this));
//插入form
file.parentNode.insertBefore(form,file).appendChild(file);
this._form=form;
}
//action可能會修改
this._form.action=this.action;
},
//設置input
_setInput:function(){
varform=this._form,oldInputs=this._inputs,newInputs={},name;
//設置input
for(nameinthis.parameter){
varinput=form[name];
if(!input){
//如果沒有對應input新建一個
input=document.createElement("input");
input.name=name;input.type="hidden";
form.appendChild(input);
}
input.value=this.parameter[name];
//記錄當前input
newInputs[name]=input;
//刪除已有記錄
deleteoldInputs[name];
}
//移除無用input
for(nameinoldInputs){form.removeChild(oldInputs[name]);}
//保存當前input
this._inputs=newInputs;
},
//停止上傳
stop:function(){
if(this._sending){
this._sending=false;
clearTimeout(this._timer);
//重置iframe
if($$B.opera){//opera通過設置src會有問題
this._removeIframe();
}else{
this._iframe.src="";
}
this.onStop();
}
},
//銷毀程序
dispose:function(){
this._sending=false;
clearTimeout(this._timer);
//清除iframe
if($$B.firefox){
setTimeout($$F.bind(this._removeIframe,this),0);
}else{
this._removeIframe();
}
//清除form
this._removeForm();
//清除dom關聯
this._inputs=this._fFINISH=this.file=null;
},
//清除iframe
_removeIframe:function(){
if(this._iframe){
variframe=this._iframe;
$$B.ie?iframe.detachEvent("onload",this._fFINISH):(iframe.onload=null);
document.body.removeChild(iframe);this._iframe=null;
}
},
//清除form
_removeForm:function(){
if(this._form){
varform=this._form,parent=form.parentNode;
if(parent){
parent.insertBefore(this.file,form);parent.removeChild(form);
}
this._form=this._inputs=null;
}
},
//超時函數
_timeout:function(){
if(this._sending){this._sending=false;this.stop();this.onTimeout();}
},
//完成函數
_finish:function(){
if(this._sending){this._sending=false;this.onFinish(this._iframe);}
}
}
⑧ java 前台ajax怎麼傳圖片集合到後台
1 框架自動接收 struts2 和sprignmvc都提供了參數綁定 可以直接以一個File對象接收 就能用了
2.自己通過request里取inputstream