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

ajax jQuery 实现文件上传

    博客分类:
  • JS
 
阅读更多



1.上传jsp。

<table cellpadding="0" cellspacing="0" border="0" class="ktable_9" >
        <tr>
            <td><input type="file" name="upoadFileName" id="upoadFileName"><a  href="#" onclick="uploadFile();return false;"><span><span>上传</span></span></a></td>
            </tr>
            <tr>
            <td>&nbsp;</td>
            </tr>
        </table>




2.下面是前端的js脚本:

function uploadFile(){
                var myurl="/uploadMyFile.do?tenderInfoId="+tenderInfoId;
         jQuery.ajaxFileUpload(
                   {
                url:myurl,          
                secureuri:false,
                            fileElementId:""upoadFileName"",   --上传文件对应的文本域的id                    
                dataType: ""json"",                                    
                success: function (data, status)          
                {    
                    alert(""上传成功"");
                                  },
                error: function (data, status, e)           
                {
                   alert(""上传失败"");
                }
            } );
    }





3.这是后台的action:
public ActionForward uploadMyFile(ActionMapping mapping,
ActionForm form, HttpServletRequest request,
HttpServletResponse response) throws Exception {
/* =============禁止缓存============== */
response.setHeader("Pragma", "no-cache");
response.setHeader("Cache-Control", "no-cache");
response.setHeader("Expires", "0");
/* =============禁止缓存============== */
response.setContentType("text/html;charset=UTF-8");
TTenderFileDTO tendform = (TTenderFileDTO) form;

MultipartHttpServletRequest mhs = (MultipartHttpServletRequest) request;
MultipartFile mf = mhs.getFile("batchSearchFile");

String filewholeName = "";
try {
FormFile file = (FormFile) tendform.getMultipartRequestHandler()
.getFileElements().get("upoadFileName");--对应于前端的文本域id,
String fileName = file.getFileName();
String fileSimpleName = fileName.substring(fileName
.lastIndexOf("."));
fileName = DateHandler.convertStringToDate(new Date(), null)
+ fileName;

if (file.getFileSize() > 50 * 1024 * 1024) {
write("{""result"":false,""error"":"" filesize""}", response);
return null;
}
String uploadPath = this.getServlet().getServletContext()
.getRealPath("/")
+ "uploadfile/";
File savePath = new File(uploadPath);
System.out.println(savePath.getAbsolutePath());
if (!savePath.exists()) {
savePath.mkdir();
}
filewholeName = uploadPath + "/" + fileName;
FileOutputStream fos = new FileOutputStream(filewholeName);
fos.write(file.getFileData());
log.info("#############上传文件:" + fileName);
write("{""result"":true}", response);
} catch (Exception e) {
write("{""result"":false,""error"":""" + e.getMessage() + """}", response);
}
return null;
}
分享到:
评论

相关推荐

    ajax+jquery实现文件上传(详细注释)

    以上就是使用Ajax和jQuery实现文件上传的基本步骤。在实际应用中,可能还需要考虑文件大小限制、错误处理、进度显示等更多细节。记得在开发过程中保持代码的可维护性和安全性,例如使用HTTPS防止数据被窃取,以及对...

    ajax+jquery+ashx实现上传文件

    在Web开发中,异步传输(Ajax)技术允许我们...通过这种组合使用Ajax、jQuery和ASHX的方式,我们可以创建一个高效且用户体验良好的文件上传系统,无需离开当前页面即可完成文件上传,从而提高了Web应用的交互性和效率。

    jquery实现ajax上传文件asp.net版

    在ASP.NET环境中,使用jQuery和Ajax来实现文件上传是一种常见的技术方案,它可以提供无刷新的用户体验,提升网站的交互性。下面将详细讲解这个过程涉及的关键知识点。 首先,我们需要了解jQuery库。jQuery是一个轻...

    ajax+jquery文件批量上传.doc

    使用`setTimeout`函数实现文件上传的延时,确保每个文件都有足够的时间完成上传过程。 ```javascript // Ajax上传文件 function TajaxFileUpload() { if (Tnum ) { $("#uploadImgState" + Tnum).html(...

    ajax+Jquery实现文件图片上传

    总之,"Ajax+jQuery实现文件图片上传"结合了HTML5的File API、Ajax和jQuery的便利,为用户提供了一种无刷新的、流畅的文件上传体验。通过以上步骤和示例代码,你应该能够理解并实现这样的功能。如果你需要进一步的...

    jQuery实现文件编码成base64并通过AJAX上传的方法

    本文实例讲述了jQuery实现文件编码成base64并通过AJAX上传的方法。分享给大家供大家参考,具体如下: 使用AJAX是无法直接上传文件的,一般都是新建个iframe在它里面完成表单提交的过程以达到异步上传文件的效果。 ...

    jQuery+php实现ajax文件即时上传

    "jQuery+php实现ajax文件即时上传"这个主题涉及了利用jQuery库来构建前端交互,配合PHP后端处理文件上传,以及如何实时反馈上传进度。以下是关于这一主题的详细知识解释: 1. **jQuery**:jQuery是一个广泛使用的...

    jquery实现的ajax文件上传功能

    jquery实现的ajax文件上传功能 $.ajaxFileUpload ( { url:'doajaxfileupload.php', secureuri:false, fileElementId:'fileToUpload', dataType: 'json', success: function (data, ...

    jquery+ajax实现文件上传的js

    本文将深入探讨如何利用jQuery和AJAX实现文件上传,并重点介绍`ajaxfileupload.js`这个jQuery插件。 首先,jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理和Ajax交互等任务。而AJAX(Asynchronous ...

    PHP + jQuery实现ajax文件即时上传 预览 配套资源

    在本文中,我们将深入探讨如何使用PHP和jQuery的Ajax技术实现文件即时上传和预览功能。这个主题主要涉及JavaScript库jQuery、jQuery Form Plugin以及PHP后端处理,这些都是现代Web开发中不可或缺的部分。以下是对每...

    Jquery AjaxUpload实现文件上传功能代码

    随着WEB技术的发展,用户体验成为衡量网站成功与否的关键,今天和大家分享如何在PHP中利用Jquery实现Ajax方式文件上传功能的例子,其中使用到了Jquery插件Ajaxupload,其可以实现单个文件和多文件上传功能。

    在Web API中使用jQuery AJAX实现文件上传的例子

    本教程将详细介绍如何在ASP.NET Web API中结合jQuery的AJAX方法实现文件上传。 首先,我们需要在客户端创建一个HTML表单,用于用户选择要上传的文件。HTML表单通常包含一个`&lt;input type="file"&gt;`元素,用户可以通过...

    jquery+ajax文件上传

    本主题将深入探讨如何使用jQuery与AJAX技术实现文件上传,同时还能传递其他表单参数,以提高用户体验和数据处理的灵活性。 首先,jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax...

    Jquery AjaxUpload实现文件上传实例 PHP版

    在这个“Jquery AjaxUpload实现文件上传实例 PHP版”中,我们将探讨如何使用jQuery的AjaxUpload插件与PHP后端进行配合,实现实时的文件上传功能。 首先,我们需要在HTML页面中创建一个用于选择文件的input元素和一...

    struts2+jquery+ajax文件异步上传

    总的来说,"struts2+jquery+ajax文件异步上传"是一个结合了后端处理和前端交互的文件上传解决方案,提供了良好的用户体验和灵活性。通过MyEclipse这样的集成开发环境,开发者可以方便地构建、调试和部署这样的项目。

    JQuery实现ajax上传文件示例源码

    本示例将深入探讨如何使用jQuery实现AJAX文件上传功能。AJAX(Asynchronous JavaScript and XML)允许我们在不刷新整个页面的情况下与服务器进行异步通信,极大地提升了用户体验。 一、jQuery与Ajax基础 jQuery...

    JQuery实现ajax上传文件示例源码20121029

    JQuery实现ajax上传文件示例源码 源码描述: url用来指定后台处理的程序,fileElementId指的是文件选择框的ID,dataType用来指定返回的数据格式,支持xml、script、json和html。 返回的json的格式最简单:{error:'...

    JQuery+ajax实现批量上传图片

    ### JQuery与Ajax结合实现批量图片上传的技术解析 在现代网页开发中,用户界面的互动性和数据处理效率成为了提升用户体验的关键因素。其中,批量上传图片功能是许多应用中不可或缺的一部分,尤其是在社交媒体、电子...

    用jquery实现ajax上传文件php版.zip

    `ajaxfileupload.js`是实现文件上传功能的JavaScript插件,它扩展了jQuery的功能,提供了一个接口来处理文件上传。这个插件通常会监听用户选择文件后触发的事件,然后使用XMLHttpRequest对象通过AJAX方式向服务器...

    jquery+ajax上传解析文件

    这里我们将深入探讨如何使用jQuery结合Ajax技术来实现文件上传,并通过JSON进行数据解析。 首先,jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。在文件上传的场景中,...

Global site tag (gtag.js) - Google Analytics