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