form、iframe实现异步上传文件

转载自：http://blog.csdn.net/sunjing21/article/details/4779321

实现主要功能：

  • 页面提供一个上传图片的input file选择框，用于上传某一类型的数张图片
  • 每次选择完本地图片后，图片便异步存储到后台的文件夹中；
  • 并将路径信息存储到数据库中；
  • 页面上显示此图的缩略图，并在旁边显示一个删除标记，当点击时，将此图片从页面、数据库、后台的文件夹中删除
  • input file选择框清空，再点击用于上传下一张图片；

JSP页面编写如下：

<div>
    <form action="uploadWaiguanImage.do" id="waiguan_form" name="waiguan_form"
          enctype="multipart/form-data" method="post" target="waiguan_hidden_frame">
        <span>
            <label>外观图</label>
            <img src="images/addImage.JPG">
            <input type="file" id="waiguan_add" name="waiguan_add"/>
        </span>
        <iframe name="waiguan_hidden_frame" id="waiguan_hidden_frame" style="display:none"></iframe>
        <c:forEach var="x" begin="1" end="3" step="1">
            <span>
                <img id="waiguan_image${x }" style="visibility:hidden" src="" width="100" alt="外观图${x }"/>
                <img id="waiguan_delete_image${x }" style="visibility:hidden;cursor: pointer" src="images/deleteImage.JPG"/>
            </span>
        </c:forEach>
    </form>
</div>

让form的target值为iframe，当form提交的时候，是异步iframe进行提交，不会影响页面的其他部分。 
c:forEach部分是首先隐藏了上传后显示的图片标签和删除标签（这里最大可以上传三张）

相应的JS代码：采用的是JQuery写的，不过写的很啰嗦，有点像是原始JS操作

/**
 * 页面加载时完成操作
 */
$(document).ready(function() {
// 设置上传外观图
    $("#waiguan_add").bind("change", function() {
        submitImage("waiguan", 3);
    });
}

/**
 * 上传图片
 *
 * @param {}
 *            para_name 图片所属属性名
 * @param {}
 *            number 此类图片的总数量
 */
function submitImage(para_name, number) {
    var para_form = para_name + "_form";
    var para_image = para_name + "_image";

    // alert(para_image);

    for (var i = 1; i <= number; i++) {
        var srcValue = $("#" + para_image + i).attr("src");
        // alert(srcValue);
        // alert(srcValue.length);
        if (srcValue == "" || srcValue.length == 0) {
            // alert("break");
            break;
        }
    }

    if (i > number) {
        alert("已超过了此类图的上传最大限");
        // 重置上传按钮，使之为空
        resetUploadBotton(para_name + "_add");
    } else {

        $("#" + para_form).submit();
    }
}

/**
 * iframe上传外观图片的返回操作
 *
 * @param {}
 *            msg 返回的图片所在地址
 */
function callbackWaiguan(msg) {

    if (msg != "error") {
        for (var i = 1; i <= 3; i++) {
            var srcValue = $("#waiguan_image" + i).attr("src");
            // alert(srcValue);
            if (srcValue == "" || srcValue.length == 0) {
                $("#waiguan_image" + i).attr("src", msg);
                $("#waiguan_image" + i).css("visibility", "visible");
                $("#waiguan_delete_image" + i).css("visibility", "visible");
                $("#waiguan_delete_image" + i).click(function() {

                    deleteImage("waiguan", i);

                });
                break;
            }
        }
    } else {
        alert("上传图片失败，后台程序出现问题！");
    }

    // 重置上传按钮，使之为空
    resetUploadBotton("waiguan_add");
}

/**
 * 删除某个图片时的异步操作
 *
 * @param {}
 *            para_name
 * @param {}
 *            number
 */
function deleteImage(para_name, number) {
    var delete_image_id = para_name + "_image" + number;
    var imagePathName = $("#" + delete_image_id).attr("src");

    if (para_name == "waiguan") {

        $.get("deleteWaiguanImage.do", {
            deleteFile : imagePathName,
            t : Math.random()
        }, function(tag) {

            alert(tag);
            if (tag == "true") {
                $("#" + delete_image_id).attr("src", "");
                $("#" + delete_image_id).css("visibility", "hidden");
                $("#" + para_name + "_delete_image" + number).css("visibility",
                        "hidden");
            } else {
                alert("连接数据库失败，无法删除该图片!");
            }
        });
    }
}

/**
 * 重置上传按钮，使之为空
 *
 * @param {}
 *            para_name_add
 */
function resetUploadBotton(para_name_add) {
    var form = document.createElement("form");
    var span = document.createElement("span");
    var para_image_file = document.getElementById(para_name_add);
    para_image_file.parentNode.insertBefore(span, para_image_file);
    form.appendChild(para_image_file);
    form.reset();
    span.parentNode.insertBefore(para_image_file, span);
    span.parentNode.removeChild(span);
    form.parentNode.removeChild(form);

}

上传图片采用的是定义的form的submit()提交，iframe的异步提交。 
返回操作将image的src的值，置为刚upload的图片在webroot中的位置，这样就能显示图片了。 
删除图片时，利用Ajax将要删除的图片路径发送到后台，进行删除，删除成功时，将页面html中image的src值置为空。

后台处理的方法如下：

/**
     * 初始化SmartUpload类，用于上传文件
     *
     * @param servlet
     * @return SmartUpload
     * @throws ServletException
     * @throws IOException
     * @throws SQLException
     */
    public SmartUpload initSmartUpload(ActionServlet servlet)
            throws ServletException, IOException, SQLException {
        // 新建一个SmartUpload对象
        SmartUpload su = new SmartUpload();

        javax.servlet.jsp.PageContext pageContext = JspFactory
                .getDefaultFactory().getPageContext(servlet, request, response,
                        null, true, 8192, true);
        // 上传初始化
        su.initialize(pageContext);

        // 设定上传限制
        // 1.限制每个上传文件的最大长度。
        su.setMaxFileSize(10000000);

        // 2.限制总上传数据的长度。
        su.setTotalMaxFileSize(20000000);

        // 3.设定允许上传的文件
        su.setAllowedFilesList("jpg,gif,bmp,pcx,"
                + "tiff,jpeg,tga,exif,fpx,cad");

        // 4.设定禁止上传的文件
        su.setDeniedFilesList("exe,bat,jsp,htm,html");

        return su;
    }

/**
     * 异步上传外观图
     *
     * @param mapping
     * @param form
     * @param request
     * @param response
     * @return
     * @throws Exception
     */
    public ActionForward uploadWaiguanImage(ActionMapping mapping,
            ActionForm form, HttpServletRequest request,
            HttpServletResponse response) throws Exception {

        SeriesService seriesService = ServiceFactory.getSeriesService(request,
                response);

        String filePathName = null;

        boolean tag= true;
        try {
            //初始化SmartUpload对象
            SmartUpload su = seriesService.initSmartUpload(this.getServlet());
            //上传外观图，将文件存储在filePath中，遍历系列对象的外观图属性，将图片的位置存储在某一空的属性中
            filePathName = "upload/" + seriesService.addWaiguanImage(su);

        } catch (Exception e) {
            e.printStackTrace();
            tag = false;
        }

        PrintWriter out = response.getWriter();
        if (tag == true) {
            out.println("<script>parent.callbackWaiguan(‘" + filePathName
                    + "‘)</script>");
        } else {
            out.println("<script>parent.callbackWaiguan(‘error‘)</script>");
        }

        return null;
    }

/**
     * 异步删除某个外观图
     *
     * @param mapping
     * @param form
     * @param request
     * @param response
     * @return
     * @throws Exception
     */
    public ActionForward deleteWaiguanImage(ActionMapping mapping,
            ActionForm form, HttpServletRequest request,
            HttpServletResponse response) throws Exception {
        Integer seriesID = (Integer) request.getSession().getAttribute(
                "seriesID");
        String filePathName = (String) request.getParameter("deleteFile");

        SeriesService seriesService = ServiceFactory.getSeriesService(request,
                response);
        boolean tag = true;
        try {
            //从数据库中和文件路径中删除外观图
            tag = seriesService.deleteWaiguanImage(filePathName, seriesID);
        } catch (Exception e) {
            e.printStackTrace();
            tag = false;
        }

        PrintWriter out = response.getWriter();

        out.write(new Boolean(tag).toString());

        return null;
    }

这样，便完成了要实现的功能。

时间： 2024-10-11 17:22:38

form、iframe实现异步上传文件的相关文章

jQuery插件-ajaxFileUpload异步上传文件

ajaxFileUpload是前两天学习过程中接触到的一个JQ插件,功能很简单,就是实现异步上传文件的功能. 1.语法介绍 $.ajaxFileUpload([setting]); 参数说明: (1)url——执行上传处理的地址: (2)secureuri——是否启用安全提交,默认为false: (3)fileElementId——需要上传<input type=”file”>控件id属性值: (4)data——自定义参数,即需要额外传递的JSON格式数据: (5)type——请求方式,提交自

简述三种异步上传文件方式

 很久没写过博客了! 上次写已经是去年的12月了,离现在也有足足三个月了.这几个月因为要搭建个人网站以及准备个人简历,包括最近要准备最近的各大公司的实习春招,很难抽时间来写博客,这次的异步文件上传我觉得是很有必要了解的,笼络了很多知识点,因此准备写一篇博客来巩固下. 异步上传文件是为了更好的用户体验,是每个前端必须掌握的技能.这里我提出三点有关异步文件上传的方式. 使用第三方控件,如Flash,ActiveX等浏览器插件上传. 使用隐藏的iframe模拟异步上传. 使用XMLHttpReques

异步上传文件多种方式归纳

最近在做异步上传文件的工作,用到了一些库,这里归纳下,暂且不考虑异常处理,仅作为demo. 1.不用任何插件,利用iframe,将form的taget设为iframe的name,注意设为iframe的id是没用的,跟网上很多说的不太一致 iframe_upload.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm

异步上传文件并获得返回值（完全跨域）

http://blog.csdn.net/lrz1011/article/details/7913992 异步上传文件并获得返回值(完全跨域)AJAX可以进行数据的异步请求,但对于文件和跨域问题却束手无策. Jsonp可以进行跨域数据的异步请求,但同样不能使用于文件. <form>表单可以进行跨域数据和文件的上传,但却会使页面跳转. 那么如何同时实现“异步”+“跨域”+“文件”+“返回值”这几个特性呢?方法如下: 原理: 将<form>表单通过一个iframe来submit,也就是

Jquery_异步上传文件多种方式归纳

1.不用任何插件,利用iframe,将form的taget设为iframe的name,注意设为iframe的id是没用的,跟网上很多说的不太一致 iframe_upload.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&

Asp.Net Mvc异步上传文件的方式

今天试了下mvc自带的ajax,发现上传文件时后端action接收不到文件, Request.Files和HttpPostedFileBase都接收不到.....后来搜索了下才知道mvc自带的Ajax不支持文件上传,无奈之下只能用其他的方式 第一种方式:通过 jquery的ajaxSubmit --->(先引入jQuery脚本)需要引入jquery.form.min.js(可以通过NuGet下载) 直接上代码 @{ Layout = null; } <!DOCTYPE html> <

input(file)异步上传文件

页面 <input id="file" name="file" type="file"><button id="btn" type="button">上传</button> //异步上传文件var $file = $('#file');$('#btn').click(function() { var data = new FormData(); data.append('

struts2 jquery ajaxFileUpload 异步上传文件

一.ajaxFileUpload 实现异步上传文件利用到了ajaxFileUpload.js这个文件,这是别人开发的一个jquery的插件,可以实现文件的上传并能够和struts2框架和好的融合在一起.但是网上的提供的一些ajaxFileUpload.js插件存在一些问题,不能够实现多次点击上传文件,要想再次上传必须重新刷新页面.在网上找了好久才找到真正的解决方案,有些网友给出的解决方案并没有真正的解决问题,不知到什么原因.我的修改: 原文件: var oldElement = $('#' +

【转】JQuery插件ajaxFileUpload 异步上传文件（PHP版）

前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现ajaxFileUpload这个插件挺不错,所以就用这个插件来做异步上传文件的效果.网上也有很多对ajaxFileUpload插件的使用的文章,不过我发现没有PHP版,所以这次服务器那边的处理就使用PHP语言来处理. 一.先对ajaxFileUpload插件的语法参数进行讲解 原理:ajaxfileu