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

前端技术 2023/09/07 JavaScript

本文实例讲述了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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/17760

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案