2013年10月 总版技术专家分月排行榜第三
2014年3月 Java大版内专家分月排行榜第一2014年1月 Java大版内专家分月排行榜第一2013年12月 Java大版内专家分月排行榜第一2013年11月 Java大版内专家分月排行榜第一2013年10月 Java大版内专家分月排行榜第一
本帖子已过去太久远了，不再提供回复功能。其他回答(4)
异步表单提交,不能提交文件.异步上传文件.和异步表单技术实现是不一样的
园豆：23790
除了iframe或者纯html表单模式，无法异步提交表单上传文件。如果非要这样，可以参考我的javascript代码
window.addEventListener("submit", function (e) {
var form = e.
if (form.getAttribute("enctype") === "multipart/form-data") {
if (form.dataset.ajax) {
e.preventDefault();
e.stopImmediatePropagation();
var xhr = new XMLHttpRequest();
xhr.open(form.method, form.action);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
if (form.dataset.ajaxUpdate) {
var updateTarget = document.querySelector(form.dataset.ajaxUpdate);
if (updateTarget) {
updateTarget.innerHTML = xhr.responseT
xhr.send(new FormData(form));
把图片放到一个Form中 用Ajax提交,需要引用文js件 &form id="summaryJpgForm" enctype="multipart/form-data" method="POST"&
　　&input type="file" id="summaryJpgFile" name="summaryJpgFile" /&
&input type="submit" id="btnsummaryJpg" value="上传文件" /&
var uploadWordOptions = {
url: '/Conrtroller/UpFile,
success: function (data) {
alert("上传成功!");
后端代码和你的一样，方法上不要用加[HttpPost]
HttpPostedFileBase upImg &这个变量名要和前台&input type="file"/& 这个控件的name一样。
&&&您需要以后才能回答，未注册用户请先。8267人阅读
目标：Ajax实现异步上传图片
要求：点击页面浏览按钮后，选择需要上传的图片，页面无刷新，将上传的图片展示出来
一：在页面编写表单代码和js代码
&%@ page language=&java& import=&java.util.*& pageEncoding=&UTF-8&%&
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&title&Ajax异步上传图片&/title&
&-- 引入jQuery异步上传js文件 --&
&script src=&/resource/jquery.form.js& type=&text/javascript&&&/script&
&!-- Ajax异步上传图片 --&
&script type=&text/javascript&&
function uploadPic() {
// 上传设置
var options = {
// 规定把请求发送到那个URL
url: &/upload/uploadPic.do&,
// 请求方式
type: &post&,
// 服务器响应的数据类型
dataType: &json&,
// 请求成功时执行的回调函数
success: function(data, status, xhr) {
// 图片显示地址
$(&#allUrl&).attr(&src&, data.path);
$(&#jvForm&).ajaxSubmit(options);
&form id=&jvForm& action=&o_save.shtml& method=&post& enctype=&multipart/form-data&&
&td width=&20%&&
&span&*&/span&
上传图片(90x150尺寸):&/td&
&td width=&80%&&
注:该尺寸图片必须为90x150。
&td width=&20%&&&/td&
&td width=&80%&&
&img width=&100& height=&100& id=&allUrl&/&
&!-- 在选择图片的时候添加事件，触发Ajax异步上传 --&
&input name=&pic& type=&file& onchange=&uploadPic()&/&
实现步骤：
1.编写form表单input类型为file
2.为页面保存按钮添加onchange事件
3.编写js代码，使用jQuery提交form表单（jQuery.form.js文件，可以自动模拟出一个form表单），请求路径
4.页面编写暂时到这里
二：在后台实现图片的上传
这里使用的是springmvc（注解开发）图片上传
package com.wanghang.
import java.io.IOE
import javax.servlet.http.HttpServletR
import javax.servlet.http.HttpServletR
import org.json.JSONO
import org.springframework.stereotype.C
import org.springframework.web.bind.annotation.RequestM
import org.springframework.web.multipart.MultipartF
* Ajax异步上传图片
* @author Hang.W
* @version 1.0,
@Controller
public class UploadController {
* 使用Ajax异步上传图片
* @param pic 封装图片对象
* @param request
* @param response
* @throws IOException
* @throws IllegalStateException
@RequestMapping(&/upload/uploadPic.do&)
public void uploadPic(MultipartFile pic, HttpServletRequest request, HttpServletResponse response) throws IllegalStateException, IOException {
// 获取图片原始文件名
String originalFilename = pic.getOriginalFilename();
System.out.println(originalFilename);
// 文件名使用当前时间
String name = new SimpleDateFormat(&yyyyMMddHHmmssSSS&).format(new Date());
// 获取上传图片的扩展名(jpg/png/...)
String extension = FilenameUtils.getExtension(originalFilename);
// 图片上传的相对路径（因为相对路径放到页面上就可以显示图片）
String path = &/upload/& + name + &.& +
// 图片上传的绝对路径
String url = request.getSession().getServletContext().getRealPath(&&) +
File dir = new File(url);
if(!dir.exists()) {
dir.mkdirs();
// 上传图片
pic.transferTo(new File(url));
// 将相对路径写回（json格式）
JSONObject jsonObject = new JSONObject();
// 将图片上传到本地
jsonObject.put(&path&, path);
// 设置响应数据的类型json
response.setContentType(&application/ charset=utf-8&);
response.getWriter().write(jsonObject.toString());
} catch (Exception e) {
throw new RuntimeException(&服务器繁忙，上传图片失败&);
1.springmvc进行参数绑定，但默认是不支持图片上传的，可以在springmvc的配置文件中进行文件上传的配置
2.设置pic形参，接收页面传递的参数
3.普通文件上传代码
4.将图片以json格式写回页面
5.图片上传部分完成
页面图片展示
1.使用jQuery动态获取到&img&标签的id
2.将获取到的json数据赋值到&img&标签的src属性
3.赋值完后，就完成了图片页面无刷新显示
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：19096次
排名：千里之外
原创：12篇
(1)(5)(2)(4)(1)
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'&&完jquery $ajaxFileUpload方法异步上传图片为什么报错?这样异步错误了，请问ajax怎么写异步3个牛币所有回答列表(4)这是表单---------------------------------------&form class=&form-horizontal& role=&form&id=&newsContent_Form&enctype=&multipart/form-data&&&div class=&form-group&&&& &&& &&& &&& &&& &&label for=&newTitle& class=&col-sm-2 control-label&&标题图片&/label&&& &&& &&& &&& &&& &&div class=&col-sm-7&&&& &&& &&& &&& &&& &&& &&input type=&file&& class=&form-control& id=&upfile& name=&upfile& /&&& &&& &&& &&& &&& &&& &&img alt=&& src=&& id=&uploadImg&& style=&width:100heigth:100px&/&&& &&& &&& &&& &&& &&& &&input type=&hidden& id=&newPicture& name=&newPicture&& value=&&/&&& &&& &&& &&& &&& &&& &&input type=&button&& value=&上传图片& onclick=&uploadFile();&&&& &&& &&& &&& &&& &&/div&&& &&& &&& &&& &&/div&&/form&-------------------------------------我是这样写ajax的***************************************************************************function uploadFile(){&& &&& &&& &&& &varformData= new FormData($(&#newsContent_Form&)[0]); &&& &&& &&& &&&&& $.ajax({ &&& &&& &&& &&&&&&&&&& url: '${base}/news/fileUpload/fileUpload.do' , &&& &&& &&& &&&&&&&&&& type: 'POST', &&& &&& &&& &&&&&&&&&& data:formData, &&& &&& &&& &&&&&&&&&& dataType:&json&,&& &&& &&& &&&&&&&&&& timeout:60000,&& &&& &&& &&&&&&&&&& async: false, &&& &&& &&& &&&&&&&&&& cache: false, &&& &&& &&& &&&&&&&&&& contentType: false, &&& &&& &&& &&&&&&&&&& processData: false, &&& &&& &&& &&&&&&&&&& success: function (msg) { &&& &&& &&& &&& &&&&&&&& var imgUrl = msg.url&& &&& &&& &&& &&&&&&&& if(msg.url !=&&){&& &&& &&& &&& &&& &&&&&&&& $(&#uploadImg&).attr(&src&,&${base}&+msg.url);&& &&& &&& &&& &&& &&&&&&&& $(&#newPicture&).val(&${base}&+msg.url);&& &&& &&& &&& &&& &&&&&& }else{&& &&& &&& &&& &&& &&& &&& && $(&#uploadImg&).attr(&src&,&&);&& &&& &&& &&& &&& &&& && }&& &&& &&& &&&&&&&&&& }, &&& &&& &&& &&&&&&&&&& error: function (msg) { &&& &&& &&& &&&&&&& &&& && console.log(msg);&& &&& &&& &&&&&&&&&& } &&& &&& &&& &&&&& }); &&& &&& &&& &}***********************************************************最佳答案服务端返回必须是 text/html 格式的数据就可以response.setContentType(&text/html&);response.getWriter().print(JSONUtil.obj2json(g));浏览器请求：& & $.ajaxFileUpload({& & & & url: '/pictures.do',& & & & secureuri: false,& & & & fileElementId: 'filepath',& & & & dataType: 'text/html',& & & & success: function(data, status) {& & & & & & var result = jQuery.parseJSON(data);十五字十五字十五字十五字十五字十五字十五字十五字十五字十五字十五字十五字&LV2我都是自己写的iframe提交表单到后台上传文件返回js调用父窗口方法就知道是否成功啦等完等等等等等等等完等完相关问答等完完完完完等等等等等完最近浏览暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级&LV2暂无贡献等级扫描二维码关注最代码为好友"/>扫描二维码关注最代码为好友博客分类：
有2个表单,一个是上传表单,一个是正常表单
上传表单需要加enctype="multipart/form-data"
问题出现了,在文件上传后,点击保存,保存正常表单数据,无法再后台接收数据,都是null
经过查看传向后台的数据块的content-type仍然是multipart/form-data,所以会获取不到值
试过不少方法,修改form的enctype为application/x-www-form-urlencoded,确实无法修改
最后同事将正常表单提交改成$.ajax({})提交,提交成功了。
type:'POST',
dataType: 'json',
$('#xxfbForm').serialize(),
async: false,
cache:false,
success: function(json)
if(json.success){
bc_result=json.message
alert("保存失败");
duinibuhaome
浏览: 24915 次
来自: 太原
楼主方便把源码 给我吗 我qq
各位高手们，有没有更好的方法呢 ，这样做起来有点麻烦呀，现在又 ...
好几年前的代码了 已经没保存了
楼主，你好，我现在很需要这个，能发个完整的代码吗 167749 ...
能否发个例子
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'