提交表单onchange时输入类型文件变为空白

时间:2014-03-13 04:17:17

标签: java jquery html spring-mvc

您好我在spring mvc中使用<input type="file">上传文件。我在文件的变更事件上提交表格并显示上传过程。但文件内容未上传,并在服务器上获取null。如果我上传点击提交按钮,一切正常。这是我的代码:

Html文件:

<form:form method="POST" modelAttribute="book" id="saveBook"
   name="saveBook" enctype="multipart/form-data">
   <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
         <td>Book :</td>
         <td>&nbsp;</td>
         <td>
            <input type="file" name="file" id="file" class="edit_form" onchange="return upload('<c:url value='/bookstore/librery/uploadBook' />', 'saveBook', this);" />
            &nbsp; 
            <form:errors path="file" />
         </td>
      </tr>
   </table>
</form:form>

Jquery代码:

function upload(requestUrl, formId, clickedObj) {

    if (clickedObj && eval(clickedObj) && clickedObj != null && clickedObj != undefined) {
        clickedObj.disabled = true;
    }

    var formData = new FormData(document.getElementById(formId));
    $.ajax({
        'url': requestUrl,
        'type': 'POST',
        'data': formData,
        'cache': false,
        'contentType': false,
        'processData': false,
        success: function (data) {
            $("#tempLoc").val(data.tempLoc);
            $("#bookPreview").attr("src", "data:image/png;base64," + data.image);
            $("#image").val(data.image);

            clickedObj.disabled = false;
        },
        error: function (xhr, status, err) {
            clickedObj.disabled = false;

            var tempErrorHTML = getAjaxRequestErrorMsg(xhr);
            alert(tempErrorHTML);
        },
        xhr: function () {
            var xhr = new window.XMLHttpRequest();
            xhr.upload.addEventListener("progress", function (evt) {
                if (evt.lengthComputable) {
                    var percentComplete = (evt.loaded / evt.total) * 100;
                    //Do something with upload progress
                    alert('percentComplete = ' + percentComplete + '%');
                }
            }, false);
            return xhr;
        },
    }, 'json');

}

如果我点击提交按钮调用上传功能,那么每件事都可以。我认为表单是在文件上传之前提交的,但不知道如何使事情正确。

我无法使用提交功能,因为我需要显示上传进度条。请帮忙。

提前致谢。

0 个答案:

没有答案