`
wanghlwin
  • 浏览: 37707 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery form 异步上传文件表单遇到的问题

    博客分类:
  • web
阅读更多

先描述下载项目中遇到的问题,在使用jquery form异步上传文件的时候,即使在struts返回视图配置文件中写上type="json",页面中接收到的内容也不会是真正的json字符串,我遇到的是在json串外侧还包了一层html标签<pre/>以至于js回调函数不能正确的解析struts端返回的json数据。

经过各种搜,有前辈也遇到过类似的情况,就此记录下来,以便自己今后查找。

 

注意以下代码中的红色部分,是关键。

 

在struts返回视图配置中加入<param name="contentType">text/html</param>即可,还有在异步上传js脚本时dataType: 'json'一定不能省略。


jsp页面首先引入:

 

    <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>

    <script type="text/javascript" src="js/jquery.form.js"></script>

 

js如下:


function addDevApp(){

if(checkForm()){

$("#addDevAppForm").attr("action",basePath+"/devAppAction!addDevApp")

function fn1(){

$.blockUI({ 

message:  '<img src="../images/loading.gif" align="absmiddle" style="margin-right:20px">'+'<span id="load_span">正提交至云编译平台,可能需要几分钟,请稍后…</span>',

css: { width: '275px' } 

}); 

}

function fn2(data){

$.unblockUI();

var msg = data.errMsg;

console.info(data);

if(msg == null){

alert("应用已提交至云编译平台!","提交云编译",function(){

window.location.href=basePath+"devAppAction!fetchDevAppListWithPage";

});

}else{

alert(msg);

}

}

var options = { 

dataType: 'json',

beforeSubmit:  fn1,   

success:       fn2

}; 

$("#addDevAppForm").ajaxSubmit(options);

}

}



在struts端xml中配置返回视图如下:


 <result name="addDevAppSuccess" type="json">

<param name="contentType">text/html</param>

<param name="includeProperties">

errMsg

</param>

</result>



分享到:
评论
2 楼 wanghlwin 2014-04-09  
ljl_ss 写道
这个问题我也遇到过了,不过是修改我是改了ajaxfileupload的源码 

强悍!
1 楼 ljl_ss 2012-12-26  
这个问题我也遇到过了,不过是修改我是改了ajaxfileupload的源码 

相关推荐

    使用jQuery.form插件,实现完美的表单异步提交

    在Web开发中,异步表单提交是一种常见需求,它能提供更好的用户体验,因为用户无需等待页面刷新即可完成数据的提交。jQuery.form插件正是为了满足这种需求而设计的,它扩展了jQuery库,使表单异步提交变得更加简单、...

    jquery-form 表单数据异步上传,文件上传

    表单异步上传,表单中可以支持文件和数据异步上传,

    jquery异步提交form表单

    这是jQuery Form Plugin的一个核心文件,它扩展了jQuery,使得我们可以方便地进行异步表单提交。例如,我们可以使用以下代码来实现: ```javascript $("#myForm").submit(function(event) { event.preventDefault...

    jquery-form 异步提交表单

    jQuery Form插件极大地简化了异步表单提交的过程,使开发者能够专注于业务逻辑和用户体验。结合SSH框架,可以构建出高效、互动性强的Web应用。在实际项目中,根据需求灵活运用这些工具和技巧,能有效提升网站性能和...

    jquery php 文件异步上传

    文件上传通常有两种方式:传统的表单提交(Form)和异步(Ajax)方式。在"form.php"中,文件是通过HTML的`&lt;form&gt;`元素,配合`enctype="multipart/form-data"`属性来实现上传的。用户选择文件后,点击提交按钮,...

    jquery文件上传js:jquery.form.js

    3. **参数携带**:除了上传文件外,该插件还可以方便地添加额外的参数,这些参数会与文件一起发送到服务器,增强了数据交互的灵活性。 4. **进度反馈**:通过监听上传进度,可以显示上传进度条,让用户了解上传状态...

    struts2+jquery之form插件实现异步上传

    通过以上步骤,你就可以实现Struts2和jQuery form插件结合的异步文件上传功能。这个过程中,关键在于正确配置和交互,以及处理好前后端的数据交换。记得在实际项目中,还需要考虑文件大小限制、错误处理、安全性(如...

    Asp.Net MVC中jquery.form附件上传例子

    jQuery Form插件是jQuery库的一个扩展,它使得表单提交变得更加灵活和易于控制,特别是在处理文件上传时。在这个例子中,我们将探讨如何在Asp.Net MVC项目中实现这一功能。 首先,我们需要确保项目已经引用了必要的...

    jquery-form - jQuery表单生成插件

    在jQuery-form中,你可以轻松实现异步(Ajax)提交表单,避免页面刷新,提升用户体验。它支持多种HTTP方法,包括POST和GET,以及XMLHttpRequest Level 2的PUT、DELETE等。此外,它还兼容各种表单编码类型,如...

    Ajax表单提交插件jquery form

    **五、异步上传文件** jQuery Form插件特别适用于处理文件上传。通过设置`dataType`为'iframe',可以实现跨域文件上传,并在`success`回调中处理返回结果。 **六、增强用户体验** 通过使用jQuery Form插件,可以...

    jquery form jquery.form.js

    jQuery Form插件,基于jQuery库,是用于处理HTML表单的增强工具,能够方便地实现异步提交、文件上传等功能,极大地简化了前端开发人员的工作。在这个主题中,我们将深入探讨jQuery Form的核心功能、使用方法以及常见...

    项目管理与SSM框架 SpringMVC 5.3 异步上传 jQuery表单上传工具jquery.form.js

    异步上传在现代Web应用中很常见,允许用户在不刷新整个页面的情况下上传文件,提高用户体验。在SpringMVC中,可以使用AsyncController或者配合Spring WebFlux来实现异步处理。 描述中提到的“jQuery表单上传工具...

    JQuery.form文件上传及管理

    `jQuery.Form.js`是jQuery的一个插件,专门用于处理表单提交,尤其是文件上传。它支持异步文件上传、进度条显示等功能,并且兼容多种浏览器,包括IE6+。 ### 2. 文件上传流程 - **初始化表单**: 首先,需要在HTML...

    java实现多文件异步上传

    ### Java实现多文件异步上传知识点详解 在现代Web应用开发中,文件上传是一个非常常见的需求,尤其是在涉及图片、文档等多媒体数据的应用场景下。为了提高用户体验,异步上传技术得到了广泛的应用。本文将深入探讨...

    ajaxForm异步提交表单(含图片)

    总的来说,ajaxForm异步提交表单是实现高效、流畅的用户交互的有效方式,特别是当表单包含图片或其他大文件时。通过正确配置和使用,可以极大地提高网站的性能和用户体验。在实际开发中,还需要注意跨域、安全性和...

    jquery form

    异步上传文件** 对于包含文件输入的表单,jQuery Form插件支持File API,允许进行异步文件上传。配合`iframe`或者`FormData`,可以实现跨域文件上传。 **7. 兼容性与最佳实践** 考虑到兼容性,确保你的项目支持...

    【springmvc+jquery.form.min.js+spring文件上传】

    在本项目"【springmvc+jquery.form.min.js+spring文件上传】"中,我们将探讨如何结合这两个技术实现异步文件上传。 首先,我们需要理解Spring MVC中的文件上传处理。Spring MVC提供了`@RequestParam("file") ...

    使用ajaxSubmit文件实现多文件的异步上传

    `ajaxSubmit`是jQuery Form Plugin的一部分,它允许我们使用Ajax技术实现表单的异步提交,包括多文件上传。这种方式不仅可以提高用户体验,因为用户无需等待页面刷新,还能有效管理服务器资源,避免一次性处理大量...

    PHP 结合jquery异步上传图片

    // 如果所有验证都通过,尝试上传文件 if ($uploadOk == 1) { if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) { echo "The file ". htmlspecialchars( basename( $_FILES["fileTo...

    jquery.form.js下载_jquery.form.js上传文件插件下载

    - **异步表单提交**:jQuery.form.js的主要特性是支持AJAX方式的表单提交,避免了页面刷新,保持用户交互的连贯性。 - **文件上传**:除了常规的数据提交,该插件还特别支持文件的异步上传,这对于现代网页中的...

Global site tag (gtag.js) - Google Analytics