formiframe实现异步上传文件

Posted 2020-06-28 花语苑

转载自：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;
    }

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