Struts2+jquery.form.js实现图片与文件上传的方法

本文实例讲述了Struts2+jquery.form.js实现图片与文件上传的方法。分享给大家供大家参考，具体如下：

jquery.form.js是jQuery的一个官方用语支持异步上传文件的插件。官方网站：http://plugins.jquery.com/form/

结合Struts2三步轻松实现文件上传

一般是针对一个页面可能不止一个Form表单，所以在一个面提交表单会影响到另一个表单，为此，图片上传表单就可以使用无刷新提交方式上传，也就是异步上传，这时jquery.from.js就派上用场了。

一、HTML

导入本jS到页面、写好上传表单

<script type="text/javascript" src="/js/jquery.form.js"></script>
<!—图片上传 -->
<s:form id="picForm" name="picForm" action="/notice/showAddNotice.action" method="post"
  enctype="multipart/form-data">
    <input type="file" name="pic" size="30"/><input type="submit" value="上传"/>
</s:form>

二、JS

// 为表单绑定异步上传的事件
$(function(){
    // 为表单绑定异步上传的事件
    $("#picForm").ajaxForm({
    url : "${pageContext.request.contextPath}/notice/uploadPic.action", // 请求的url
    type : "post", // 请求方式
    dataType : "text", // 响应的数据类型
    async :true, // 异步
    success : function(imageUrl){
        //alert(imageUrl);
    },
    error : function(){
        alert("数据加载失败！");
    }
});
// 为提交按钮绑定事件
$("#saveBtn").click(function(){
    // 表单输入较验
    var title = $("#title");
    // 获取textarea的内容
    var content = tinyMCE.get('content').getContent();
    var msg = "";
    if ($.trim(title.val()) == ""){
        msg = "公告标题不能为空！";
        title.focus();
    }else if ($.trim(content) == ""){
        msg = "内容不能为空！";
    }
    msg = "";
    if (msg != ""){
        alert(msg);
    }else{
        // 表单提交
        $("#noticeForm").submit();
    }
});

三、Struts2Action

public class uploadPicAjax extends AbstractAjaxAction {
    private static final long serialVersionUID = -4742151106080093662L;
    /** Struts2文件上传的三个属性 */
    private File pic;
    private String picFileName;
    private String picContentType;
    @Override
    protected String getJson() throws Exception {
        //获取项目部署的路径
        String realPath = ServletActionContext.getServletContext()
                .getRealPath("/images/notice");
        //生成新的文件名
        String newFileName = UUID.randomUUID().toString()+"."
                +FilenameUtils.getExtension(picFileName);// 获取文件的后缀名 aa.jpg --> jpg
        FileUtils.copyFile(pic, new File(realPath + File.separator + newFileName));
        return "/images/notice/" + newFileName;
    }
    /** setter and getter method **/
    ......
}

四、配置Struts2.xml

<!-- 图片的异步上传 -->
<action name="uploadPic" class="com.wise.hrm.action.notice.uploadPicAjax">
</action>

好了，从页面到后台就已经写完了。这样就可以上传了。完毕！

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery切换特效与技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery插件AjaxFileUpload实现ajax文件上传

    本文实例为大家分享了AjaxFileUpload实现文件上传的具体代码,供大家参考,具体内容如下 jQuery插件AjaxFileUpload用来实现ajax文件上传,该插件使用非常简单,接下来写个demo演示怎么用AjaxFileUpload插件实现文件上传. 1.引入AjaxFileUpload插件相关的js 复制代码 代码如下: <script type="text/javascript" src="<%=basePath%>resources/js/

  • ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法

    本文实例讲述了ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法.分享给大家供大家参考.具体实现方法分析如下: 首先,AjaxFileUploader插件是一个基于jquery的插件,我们可以使用AjaxFileUploader插件来实现文件异步上传功能了,使用这款插件上传文件不要担心兼容性的问题,它的兼容性可以说兼容所有主流浏览器,下面来给大家介绍一个AjaxFileUploader+thinkphp实现文件上传的实例. ThinkPHP框架下用AjaxFileUpl

  • AjaxFileUpload结合Struts2实现多文件上传(动态添加文件上传框)

    AjaxFileUpload结合Struts2实现多文件上传(动态添加文件上传框)

    上篇文章http://www.jb51.net/article/124489.htm介绍了ajaxfileupload实现多文件上传, 但只是固定的文件个数,如果需求不确定是多少文件 则我们就需要动态的添加文件上传框,以实现灵活性. 基于上篇基本框架是不变的,主要修改以下几个方面 1.jQuery实现动态添加删除文件上传框 2.获取文件上传框的ID 3.ajaxfileupload.js里将ID数组转换为需要的Object数组 依次解决上面问题 一.实现动态添加删除文件上传框 <body> &

  • 使用AjaxFileUpload.js实现异步文件上传示例

    ajax是无法提交文件的,所以在上传图片并预览的时候,我们经常使用Ifame的方法实现看似异步的效果.但是这样总不是很方便的,AjaxFilleUpload.js对上面的方法进行了一个包装,使得我们不用去管理Iframe的一系列操作,也不用影响我们的页面结构,实现异步的文件提交. html: 复制代码 代码如下: <input type="file" name="upload" hidden="hidden" id="file_u

  • 利用ajaxfileupload插件实现文件上传无刷新的具体方法

    做项目的时候遇到了这样一个问题,如果用普通的ASP.NET FileUpload控件实现文件上传,那么页面会刷新,那么页面上用JS拼出的元素就会消失,为了上传文件,又不能刷新页面,ajaxfileupload插件是一个很好的选择(插件下载地址:http://files.jb51.net/file_images/article/201306/js/ajaxfileupload.js) ajaxfileupload是jQuery的一个插件,使用这个插件同时要引用jQuery.js文件 直接上代码吧

  • JavaEE中struts2实现文件上传下载功能实例解析

    JavaEE中struts2实现文件上传下载功能实例解析

    本文实例为大家分享了struts2实现文件上传下载的具体实现代码,供大家参考,具体内容如下 一.文件上传 struts提交的文件组件上传, 前台: 1).提交方式POST 2).表单类型 multipart/form-data 3).input type=file 后台: Apache提供的FileUpload组件 核心类: FileItemFactory FileItem的工厂 ServletFileUpload servlet 中的文件上传的核心类 FileItem 封装了上传的表单文件项的

  • JavaWeb中struts2实现文件上传下载功能实例解析

    在做B/S系统时,通常会涉及到上传文件和下载文件,在没接struts2框架之前,我们都是使用apache下面的commons子项目的FileUpload组件来进行文件的上传,但是那样做的话,代码看起来比较繁琐,而且不灵活,在学习了struts2后,struts2为文件上传下载提供了更好的实现机制,在这里我分别就单文件上传和多文件上传的源代码进行一下讲解,这里需要导入文件下载上传的两个jar文件,一个是commons-fileupload-1.2.2.jar,另一个是commons-io-2.0.

  • ajaxFileUpload.js插件支持多文件上传的方法

    前提条件: ajaxFileUpload.js插件多文件上传 步骤: 1.修改源码,(源码只支持单个文件的上传): 复制代码 代码如下: //修改前代码------- //var oldElement = jQuery('#' + fileElementId); //var newElement = jQuery(oldElement).clone(); //jQuery(oldElement).attr('id', fileId); //jQuery(oldElement).before(ne

  • Struts2+jquery.form.js实现图片与文件上传的方法

    本文实例讲述了Struts2+jquery.form.js实现图片与文件上传的方法.分享给大家供大家参考,具体如下: jquery.form.js是jQuery的一个官方用语支持异步上传文件的插件.官方网站:http://plugins.jquery.com/form/ 结合Struts2三步轻松实现文件上传 一般是针对一个页面可能不止一个Form表单,所以在一个面提交表单会影响到另一个表单,为此,图片上传表单就可以使用无刷新提交方式上传,也就是异步上传,这时jquery.from.js就派上用

  • 使用jQuery.form.js/springmvc框架实现文件上传功能

    使用jQuery.form.js/springmvc框架实现文件上传功能

    使用的技术有jquery.form.js框架, 以及springmvc框架.主要实现异步文件上传的同时封装对象,以及一些注意事项. 功能本身是很简单的,但是涉及到一些传递参数类型的问题.例如:jquery的ajax方法与jquery.form.js中的ajaxSubmit方法的参数,具体细节将在下一篇博客中分享. 重点: html表格三要素: action="fileUpload/fileUpload" method="post" enctype="mul

  • 使用jquery.form.js实现图片上传的方法

    本文实例讲述了使用jquery.form.js实现图片上传的方法.分享给大家供大家参考,具体如下: testupfile2.php <?php header('Content-type:text/html;charset=utf-8'); include_once 'includes/common.inc.php'; if(!empty($_FILES['upfile'])){ //文件格式 $image=array('image/jpg', 'image/jpeg', 'image/png',

  • jQuery+ajax简单实现文件上传的方法

    本文实例讲述了jQuery+ajax简单实现文件上传的方法.分享给大家供大家参考,具体如下: 可以通过ajax来提交表单,而不会刷新页面.主要使用的方法是 $("#formID").ajaxSubmit()方法. 1.要引入js插件 需要下载的附件:jquery.form.js 2.页面代码: <script src="project/js/jquery.form.js" type="text/javascript"></scr

  • vue中实现图片和文件上传的示例代码

    html页面 <input type="file" value="" id="file" @change='onUpload'>//注意不能带括号 js代码 methods: { //上传图片 onUpload(e){ var formData = new FormData(); f ormData.append('file', e.target.files[0]); formData.append('type', 'test');

  • 原生JS实现前端本地文件上传

    本文实例为大家分享了JS实现前端本地文件上传的具体代码,供大家参考,具体内容如下 通过input type = file来选择本地文件 <div> <form> <input type="file" id="file-input" name="fileContent"> </form> </div> var fileInput = document.querySelector('#fil

  • 详解Django自定义图片和文件上传路径(upload_to)的2种方式

    最近在做一个仿知乎网站的项目了,里面涉及很多图片和文件上传.趁此机会我给大家总结下Django自定义图片和文件上传路径的2种方式吧. 方法1: 在Django模型中定义upload_to选项. Django模型中的ImageField和FileField的upload_to选项是必填项,其存储路径是相对于MEIDA_ROOT而来的. 我们来看一个简单案例(如下所示).如果你的MEDIA_ROOT是/media/文件夹,而你的上传文件夹upload_to="avatar", 那么你上传的

  • struts2+jsp实现文件上传的方法

    本文实例讲述了struts2+jsp实现文件上传的方法.分享给大家供大家参考.具体如下: 1. java代码: package com.wang.test; import java.io.InputStream; import org.apache.struts2.ServletActionContext; import com.opensymphony.xwork2.Action; import com.opensymphony.xwork2.ActionSupport; public cla

  • JavaScript实现form表单的多文件上传

    form表单的多文件上传,具体内容如下 formData对象可以使用一系列的键值对来模拟一个完整的表单,然后使用Ajax来发送这个表单 使用<form>表单初始化FormData对象的方式上传文件 <!--文件上传--> <form id="uploadForm" enctype="multipart/form-data"> <div class="row" style="margin-top:

随机推荐