`
pcajax
  • 浏览: 2162632 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

一个简单的jQuery插件ajaxfileupload实现ajax上传文件例子

阅读更多

页面代码:

<html>
    <!-- 引入相关的js文件,相对路径  -->
    <script type="text/javascript" src="js/jquery.js"></script>
      <script type="text/javascript" src="js/ajaxfileupload.js"></script>

    <!-- 执行上传文件操作的函数 -->
      <script type="text/javascript">
          function ajaxFileUpload(){
               $.ajaxFileUpload(
                   {
                url:'update.do?method=uploader',            //需要链接到服务器地址
                secureuri:false,
                fileElementId:'houseMaps',                        //文件选择框的id属性
                dataType: 'xml',                                     //服务器返回的格式,可以是json
                success: function (data, status)            //相当于java中try语句块的用法
                {     
                    $('#result').html('添加成功');
                },
                error: function (data, status, e)            //相当于java中catch语句块的用法
                {
                    $('#result').html('添加失败');
                }
            }
                  
               );
             
          }
      </script>
  </head>
 
  <body>
      <form method="post" action="update.do?method=uploader" enctype="multipart/form-data"> 
        <input type="file" id="houseMaps" name="houseMaps"/>
        <input type="button" value="提交" onclick="ajaxFileUpload()"/>
    </form>
    <div id="result"></div>
   
  </body>
</html>

服务器代码:

public class UpdateAction extends DispatchAction {

    public ActionForward uploader(ActionMapping mapping, ActionForm form,
            HttpServletRequest request, HttpServletResponse response) {
        UpFormForm upFormForm = (UpFormForm) form;
        FormFile ff = upFormForm.getHouseMaps();
        try {
            InputStream is = ff.getInputStream();
            File file = new File("D:/" + ff.getFileName());            //指定文件存储的路径和文件名
            OutputStream os = new FileOutputStream(file);
           
            byte[] b = new byte[1024];
            int len = 0;
            while((len = is.read(b)) != -1){
                os.write(b, 0, len);
            }
            os.close();
            is.close();
        } catch (Exception e) {
            e.printStackTrace();
           
        }
       
        return null;
    }
<script type="text/javascript"><!-- google_ad_client = "pub-6770445892601887"; /* 468x60, 创建于 09-11-19 */ google_ad_slot = "4437639877"; google_ad_width = 468; google_ad_height = 60; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> }

分享到:
评论

相关推荐

    一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子

    为了实现基于AJAX的文件上传功能,本文详细介绍了jQuery插件ajaxfileupload.js的使用方法。该插件允许开发者以异步的方式将文件数据上传至服务器,而无需刷新页面或提交传统表单,从而提升了用户体验。以下是对本文...

    ajax+jquery+struct+ajaxfileupload有增删改功能上传文件例子

    4. **AjaxFileUpload**:这是一个jQuery插件,专门用于处理文件上传。它扩展了Ajax的功能,使得可以方便地上传文件。AjaxFileUpload支持多文件选择、进度条显示、文件类型检查等功能,简化了开发者实现文件上传的...

    PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例

    ajaxFileUpload是一个实用的插件,它允许我们在无需刷新页面的情况下,实现文件的上传。 **一、ajaxFileUpload插件的工作原理** ajaxFileUpload插件的运作机制是通过监听IFrame的`onload`事件来实现异步文件上传。...

    jQuery插件ajaxfileupload.js实现上传文件

    总的来说,使用jQuery插件ajaxfileupload.js实现文件上传涉及以下几个关键步骤: 1. 创建HTML结构,包括文件输入按钮、文件名显示和删除按钮。 2. 引入ajaxfileupload.js插件文件。 3. 编写JavaScript代码,初始化...

    MVC+ajaxfileupload实现多图片同时上传

    AjaxFileUpload是ASP.NET AJAX库中一个组件,它允许异步上传文件,即在不刷新整个页面的情况下进行文件上传。这种方式提高了用户体验,因为用户可以在上传文件的同时继续浏览其他页面内容。 实现多图片上传的关键...

    ajax上传文件案例

    综上所述,"ajaxfileupload"是一个简化AJAX文件上传过程的工具,通过它我们可以构建出高效且用户体验良好的文件上传功能。开发者需要理解其工作原理,并结合实际项目需求进行定制和优化,以确保文件上传功能既安全又...

    ajaxFileUpload插件

    **AjaxFileUpload插件**是一种基于JavaScript和Ajax技术的文件上传解决方案,主要用于在不刷新页面的情况下实现异步文件上传。这个插件使得用户能够在后台处理文件上传,提供更好的用户体验,因为它们可以在后台运行...

    关于ajaxfileupload 文件上传实例

    首先,AjaxFileUpload是jQuery的一个插件,它通过创建隐藏的IFrame来模拟表单提交,从而实现在后台上传文件。在前端,我们需要引入AjaxFileUpload的JavaScript库,并配置相应的HTML元素。例如: ```html 上传 ``` ...

    ASP.NET jquery.ajaxfileupload.js文件上传实例

    ajaxfileupload.js是jQuery的一个插件,专门用于处理文件的异步上传。这个插件使得在不刷新整个页面的情况下,用户可以上传文件,提高用户体验,尤其是在需要多次上传或大文件上传时。 使用ajaxfileupload.js的步骤...

    ajaxfileupload上传文件

    `AjaxFileUpload` 是一个基于 jQuery 的插件,它允许用户在不刷新整个页面的情况下实现异步(即AJAX)文件上传,提高了用户体验。下面将详细介绍 `AjaxFileUpload` 插件的使用方法以及与之相关的 `jQuery` 和 HTML ...

    ajaxfileupload+springmvc例子

    `AjaxFileUpload` 是一个基于 jQuery 的插件,它允许用户通过异步方式上传文件,无需刷新整个页面。而SpringMVC作为Java后端的一个强大的MVC框架,提供了处理文件上传请求的能力。本文将详细介绍如何结合 `...

    jquery之ajaxfileupload异步上传插件(附工程代码)

    这是一个轻量级的插件,专门用于实现文件的异步上传。通过使用AJAX技术,它可以将文件数据发送到服务器,而不会刷新整个页面。在项目中,你可以从指定的下载地址...

    PHP实例开发源码—PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁.zip

    3. **jQuery File Upload**:这是一款基于jQuery的插件,用于实现文件的异步上传。它提供了丰富的API和配置选项,支持多文件选择、文件预览、进度条显示等功能。在这个实例中,它负责用户界面的交互,如选取文件、...

    JSP使用ajaxFileUpload.js实现跨域问题.docx

    本文主要介绍如何在JSP项目中使用`ajaxFileUpload.js`插件解决跨域文件上传的问题,并提供了一个具体的示例代码,包括前端JS部分以及后端JSP和Struts2相关的处理逻辑。通过这个例子,我们可以深入了解整个跨域文件...

    使用jQuery ajaxupload插件实现无刷新上传文件

    jQuery ajaxupload插件是一个轻量级的解决方案,它允许用户在不刷新页面的情况下上传文件。这个插件主要依赖于AJAX技术,使得文件上传过程在后台进行,同时保持页面的交互性和响应性。相比传统的iframe上传和Flash...

    SpringMVC结合ajaxfileupload实现文件无刷新上传代码

    【SpringMVC结合ajaxfileupload实现文件无刷新上传】 在现代Web开发中,用户期望有更流畅、更快捷的交互体验,文件上传功能也不例外。传统的文件上传方式通常需要页面刷新,而通过Ajax技术,我们可以实现在不刷新...

    解析ajaxFileUpload 异步上传文件简单使用

    `AjaxFileUpload` 是一个基于 jQuery 的插件,它使得利用 AJAX 技术进行文件上传变得简单。本文将详细讲解如何使用 `AjaxFileUpload` 插件实现异步文件上传。 首先,`AjaxFileUpload` 的基本使用涉及到前端的 HTML ...

    PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁

    首先,`ajaxfileupload`是一个jQuery插件,它提供了文件的异步上传功能。在头像上传过程中,它允许用户在不刷新页面的情况下提交图片文件。尽管在尝试添加上传进度功能时遇到了困难,但仍然可以通过此插件实现基本的...

    ajax上传功能

    【Ajax上传功能】是指在网页上使用Ajax技术实现文件上传的一种方法,它允许用户在不刷新整个页面的情况下完成文件的提交。AjaxFileUploader是一个常用的上传插件,它具有良好的兼容性,支持Internet Explorer(IE)...

    ajax 文件上传 带进度香条

    使用Jquery.uploadify上传文件。...jquery有很多插件,其中也有不少上传文件的插件,像ajaxfileupload.js、uploadify.js,不过网上的例子几乎全是php的,很郁闷,研究了半天,终于把uploadify用jsp版本弄出来了

Global site tag (gtag.js) - Google Analytics