我在使用 Java 构建的 Web 应用程序时遇到了 IE 特定问题。在 AJAX 提交多部分表单时,仅在 IE 中,我看到 MalformedStreamException。该表单在 FF 和 Chrome 中完美提交。
我一直在用头撞墙,试图准确找出这个问题何时出现以及可能导致它的原因,但我一直无法找到答案。我注意到从 FormData 对象中删除 [0] 会导致表单正确提交。但是,这样做会破坏图像提交,我认为这是由于 FormData 对象的格式化方式造成的。我已经包含了我们损坏的表单之一的 HTML 和 Javascript。任何帮助将不胜感激。
JSP
<form:form class="scrollingContent bbq" name="addArtistForm" id="addArtistForm" modelAttribute="artistModel"
method="post" enctype="multipart/form-data">
<div class="step cf" id="addArtist-1">
<div class="ediv errorMessage"></div>
<%--<div class="dividedRow row cf">
<div class="left modalLabel standardLabel">
<label for="fbArtistID">Start With A <a target="_blank" href="https://developers.facebook.com/tools/explorer?method=GET&path=TheLostOnion" title="Find Your Facebook Artist ID Here"><span class="green">Facebook
ID</span></a> </label>
<p class="helpText">Paste your Facebook Path in the Get field, not including the "facbook.com/", then click submit and look for your "id"</p>
</div>
<div class="right modalField">
<input type="text" name="fbArtistID" id="fbArtistID" /> <input
type="button" name="fbGo" id="fbGo" class="silverBtn noShadow"
value="Go »" onclick="fbLogin()" />
</div>
</div>
<!-- /.dividedRow -->
--%>
<div class="fieldBlock row cf">
<div class="left modalLabel standardLabel">
<label for="artistName">Artist Name<span class="red">*</span>
</label>
</div>
<div class="right modalField">
<input type="text" name="artistName" id="artistName1" class="ajaxSearch" onkeyup="getArtistListForArtist(this, 'membersstate2', 'artistMembersId')"/>
<p class="helpText">Please make sure your Artist is not ALREADY in the database from other fans and Promoters who add artists, type each keyword of your artist name and look to see if your artist listing comes up on the right - if it does, click on it and then CLAIM it so you can manage it!</p>
<%-- <form:input path="artistName" id="artistName" /> --%>
</div>
</div>
<!-- /.fieldBlock -->
<div class="fieldBlock row cf">
<div class="left modalLabel standardLabel">
<label for="artistPrevName">Alias/Previous Name</label>
</div>
<div class="right modalField">
<!-- <input type="text" name="artistPrevName" id="artistPrevName" /> -->
<form:input path="previousName" id="previousName" />
<form:errors path="previousName" class="red" />
</div>
</div>
<!-- /.fieldBlock -->
<div class="fieldBlock row cf">
<div class="left modalLabel standardLabel">
<label for="location">Location<span class="red">*</span> </label>
<p class="helpText">Where is this Artist based out of? Choose the Best Possible Answer, if you're not sure, this can be updated later</p>
<p class="helpText"><a href="https://maps.google.com/" target="_blank">Search on Google Maps in a New Tab</a></p>
</div>
<div class="right modalField">
<div class="fieldSet">
<select id="artistState" name="artistState"></select>
<p class="helpText">State</p>
</div><!-- /.fieldSet -->
<div class="fieldSet">
<div><select id="artistCity" name="artistCity"></select></div>
<p class="helpText">City</p>
</div>
<span class="helpText sep">Or</span>
<div class="fieldSet">
<form:input path="zipcode" id="zipcode" />
<p class="helpText">Zip Code</p>
</div>
<!-- /.fieldSet -->
</div><!-- /.modalField -->
<!--<div class="right modalField">
<div class="fieldSet upSet">
<p class="helpText">State City/Town</p>
<select id="artistState" name="artistState"></select>
<div style="float: right;">
<select id="artistCity" name="artistCity"></select>
</div>
</div>
</div>-->
<!-- /.right -->
</div><!-- /.fieldBlock -->
<div class="fieldBlock cf">
<div class="left modalLabel">
<label for="genreSlider_AddArtist">Main Genres<span class="red">*</span>
</label>
<p class="helpText">*Choose Up To 3</p>
<p class="helpText">Choose the Best Answers, you'll be able to provide a "Genre in Your Own Words" later</p>
</div>
<div class="right modalField">
<h3>Choose UP TO 3 Best Answers</h3>
<ul id="genreSlider_AddArtist" class="row floatLabels genreSlider">
<c:forEach items="${childGenres}" var="childgenre" varStatus="loop">
<c:set var="rootGenreName" value="${childgenre.key}"></c:set>
<li><hgroup>
<h4>${rootGenreName}</h4>
</hgroup> <!-- /.cbSet -->
<div class="left">
<c:set value="${fn:length(childgenre.value) }" var="genreCount" />
<c:choose>
<c:when test="${genreCount > 0}">
<c:set value="${ (genreCount/2) + (1 - ((genreCount/2) % 1)) % 1}" var="genreHalf" />
</c:when>
<c:otherwise>
<c:set value="1" var="genreHalf" />
</c:otherwise>
</c:choose>
<c:forEach items="${childgenre.value}" begin="0" end="${ genreHalf - 1 }"
var="genre">
<div class="cbSet">
<form:input type="checkbox" path="genres" id="genre-${ genre.id }-CB_2"
value="${genre.id}" />
<label for="genre-${ genre.id }-CB_2" class="checkBtn">${genre.genreName}</label>
</div>
<!-- /.cbSet -->
</c:forEach>
<!--/c:forEach-->
</div>
<div class="right">
<c:forEach items="${childgenre.value}" begin="${ genreHalf }" var="genre">
<div class="cbSet">
<form:input type="checkbox" id="genre-${ genre.id }-CB_2" path="genres"
class="genre caCB" value="${genre.id}" />
<label for="genre-${ genre.id }-CB_2" class="checkBtn">${genre.genreName}</label>
</div>
<!-- /.cbSet -->
</c:forEach>
</div>
</li>
<c:if test="${loop.last}">
<li>
<p class="sliderText">
</p>
</li>
</c:if>
</c:forEach>
</ul>
<!-- #genreSlider -->
</div>
<!-- /.right -->
</div>
<!-- /.fieldBlock -->
<div class="fieldBlock cf">
<div class="modalLabel left standardLabel">
<label>Logo/Photo</label>
<p class="helpText">This is the main image that will appear for
your Artist Listing on all pages of the site. Should be at least 240px wide, and under 1500px wide.</p>
</div>
<!-- /.modalLabel -->
<div class="right modalField">
<input type="file" name="artistLogo" id="artistLogo"/>
</div>
<!-- /.modalField -->
</div>
<!-- /.fieldBlock -->
<div class="fieldBlock cf">
<div class="modalLabel left standardLabel">
<label>Header Image</label>
<p class="helpText">This is the image that will appear at the
top of your Artist Page. Should be at least 600px wide, the height can vary, shoot for at least 200px tall.</p>
</div>
<!-- /.modalLabel -->
<div class="modalField right">
<input type="file" name="artistHeaderImage" id="artistHeaderImage" />
</div>
<!-- /.modalField -->
</div>
<!-- /.fieldBlock -->
<div class="fieldBlock cf">
<div class="left modalLabel">
<label>CLAIM?</label>
</div>
<!-- /.modalLabel -->
<div class="right modalField">
<div class="cbSet">
<form:input path="isClaimed" id="claim" name="claim" type="checkbox" value="true" />
<span>Do you represent this artist?</span>
</div>
<!-- /.cbSet -->
<div class="claimWarning">
<p class="small">Claims are normally processed within an hour, but can take up to 24hrs depending on day of week and time of day. Thanks!</p>
</div><!-- /."claimWarning" -->
</div>
<!-- /.modalField -->
</div>
<!-- /.fieldBlock -->
</div>
<!-- /.step#1 -->
<div class="step cf" id="addArtist-2">
<div class="ediv2 errorMessage"></div>
<h3>Connect</h3>
<div class="fieldBlock cf">
<div class="left modalLabel standardLabel">
<label for="artistPhone">Primary Contact Phone</label>
<p class="helpText">This information will not be made public, it for our staff to be able to reach you to assist with any issues.</p>
</div>
<!-- /.modalLabel -->
<div class="right modalField">
<input type="text" name="primaryContactPhone" id="artistPhone" maxlength="15" />
</div>
<!-- /.modalField -->
</div>
<!-- /.fieldBlock -->
<div class="fieldBlock cf">
<div class="left modalLabel standardLabel">
<label for="artistEmail">Primary Contact Email</label>
</div>
<!-- /.modalLabel -->
<div class="right modalField">
<form:input type="text" path="artistEmail" />
</div>
<!-- /.modalField -->
</div>
<!-- /.fieldBlock -->
<div class="fieldBlock dividedRow cf">
<div class="left modalLabel">
<label>Web Links</label>
<p class="helpText">Add as many as you like - Please include http://</p>
</div>
<fieldset id="artistConnectSection_1"
class="repeatingSection right modalField">
<div class="bottomMargin">
<div class="fieldSet">
<input type="text" name="url" id="artistConnect_1" class="artistConnect_1"/>
</div>
<!-- /.fieldSet -->
<div class="fieldSet">
<select class="styled" name="urlType">
<c:set var="PersonalLink" value="${PersonalLinkList}" />
<c:forEach var="links" items="${PersonalLink}">
<option value="${links.id}">
<c:out value="${links.linkName}" />
</option>
</c:forEach>
</select>
</div>
<!-- /.fieldSet -->
<div class="fieldSet">
<input type="button" title="Remove"
class="deleteField silverBtn smallBtn" value="X" />
</div>
<!-- /.fieldSet -->
</div>
<!-- modalField -->
</fieldset>
<div class="modalField right">
<input type="button" title="Add Another"
class="addField silverBtn smallBtn" value="+" />
</div>
<!-- /.modalField -->
</div>
<!-- /.fieldBlock -->
<!-- /.fieldBlock -->
<h3>About</h3>
<div class="dividedRow">
<div class="fieldBlock cf">
<div class="modalLabel left standardLabel">
<label>Artist Type</label>
<p class="helpText">What do people refer to you as? Choose the Best Answer</p>
</div>
<div class="modalField right">
<select class="styled" name="artistType">
<c:set var="ArtistType" value="${ArtistTypeList}" />
<c:forEach var="type" items="${ArtistType}">
<option value="${type.id}">
<c:out value="${type.artistTypeName}" />
</option>
</c:forEach>
</select>
</div>
<!-- /.modalField -->
<!-- /.modalField -->
</div>
<!-- /.fieldBlock -->
<div class="fieldBlock cf">
<div class="modalLabel left tallLabel">
<label>Established</label>
</div>
<!-- /.modalLabel -->
<div class="modalField right">
<div class="fieldSet">
<p class="helpText">Month</p>
<select class="styled" name="establishedMonth">
<option value="">Select</option>
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="Mar">Mar</option>
<option value="Apr">Apr</option>
<option value="May">May</option>
<option value="Jun">Jun</option>
<option value="Jul">Jul</option>
<option value="Aug">Aug</option>
<option value="Sep">Sep</option>
<option value="Oct">Oct</option>
<option value="Nov">Nov</option>
<option value="Dec">Dec</option>
</select>
</div>
<!-- /.fieldSet -->
<div class="fieldSet">
<p class="helpText">Year</p>
<% java.util.Date dNow = new java.util.Date();
java.text.SimpleDateFormat simpleDateFormat = new java.text.SimpleDateFormat("yyyy");
int start = Integer.valueOf(simpleDateFormat.format(dNow));
int diff = start - 1950;
%>
<select class="styled" name="establishedYear">
<option value="0">Select</option>
<%
for (int i = 0; i <= diff; i++) {
%>
<option value="<%=start%>"><%=start%></option>
<% start--; } %>
</select>
<!-- <select class="styled" name="establishedYear">
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
</select>
-->
</div>
<!-- /.fieldSet -->
</div>
<!-- /.modalField -->
</div>
<!-- /.fieldBlock -->
<div class="fieldBlock cf">
<div class="modalLabel left standardLabel">
<label>Status</label>
</div>
<div class="modalField right">
<form:select path="status" class="styled" name="status">
<option value="-1">Select</option>
<c:set var="StatusList" value="${StatusList}" />
<c:forEach var="status" items="${StatusList}">
<option value="${status.id}">
<c:out value="${status.statusValue}" />
</option>
</c:forEach>
</form:select>
</div>
<!-- /.modalField -->
<!-- /.modalField -->
</div>
<!-- /.fieldBlock -->
<div class="fieldBlock cf">
<div class="modalLabel left standardLabel">
<label>Stature</label>
<p class="helpText">If you commonly play more than 50 miles from your hometown, you are probably a regional artist. If you commonly perform over 500 miles from your hometown, you are probably a national artist!</p>
</div>
<div class="modalField right">
<form:select path="stature" class="styled" name="stature">
<c:set var="StatureList" value="${StatureList}" />
<c:forEach var="stature" items="${StatureList}">
<option value="${stature.id}">
<c:out value="${stature.statureValue}" />
</option>
</c:forEach>
</form:select>
</div>
<!-- /.modalField -->
<!-- /.modalField -->
</div>
<!-- /.fieldBlock -->
</div>
<!-- /.dividedRow -->
<h3>Sound</h3>
<div class="fieldBlock cf">
<div class="modalLabel left standardLabel">
<label for="specificGenre">Genre (In Your Own Words)</label>
<p class="helpText">What Would You Say Your Genre is?</p>
</div>
<!-- /.modalLabel -->
<div class="modalField right">
<form:input type="text" path="ownWord" name="specificGenre"
id="ownWord" />
</div>
<!-- /.modalField -->
</div>
<!-- /.fieldBlock -->
</div>
<!-- /.step -->
<div class="step cf" id="addArtist-3">
<div class="edivMember1 errorMessage"></div>
<div class="edivMember errorMessage"></div>
<!--<ul class="windowStates cf">
<li><a href="#members-state1">State 1</a></li>
<li><a href="#members-state2">State 2</a></li>
</ul>-->
<h3>Members</h3>
<div class="cf addedMembers">
<!-- State 1 -->
<div id="members-state1" class="cf selectedList"></div>
<!-- State 2 -->
<div id="membersstate2" class="cf selectedList">
<!-- <div class="member">
<h3>Dan Shedd</h3>
<p>Boston, MA</p>
<p class="smDetail">Vocals, Guitar</p>
<input type="button" class="close right silverBtn smallBtn"
value="X" />
</div> -->
<!-- /.member -->
</div>
<!-- /.selectedList -->
</div>
<!-- /.addedMembers -->
<!-- <input type="hidden" name="artistMembersId" id="artistMembersId" /> -->
<div class="dividedRow">
<h3>Add Member</h3>
<p class="helpText">(From user account)</p>
<div class="fieldBlock cf">
<div class="left modalLabel standardLabel">
<label for="existingMembers">Search Existing</label>
</div>
<!-- /.modalLabel -->
<div class="right modalField">
<input type="text" id="existingMembers" class="ajaxSearch"
onkeyup="getUserListInDiv(this, 'membersstate2', 'artistMembersId','search')" />
</div>
<!-- /.modalField -->
</div>
<!-- /.fieldBlock -->
</div>
<!-- /.dividedRow --->
</div>
<!-- /.step -->
<div class="fieldBlock left cf">
<input type="reset" class="silverBtn back" />
</div>
<!-- /.fieldBlock -->
<div class="fieldBlock right cf">
<!-- <input type="button" class="silverBtn" value="Save & Close"
name="save&Close" /> -->
<!-- <input type="button" class="silverBtn" value="Save & New" name="save&New" onclick="save()" /> -->
<!-- <input type="button" class="silverBtn" value="Save & New"
name="save&New" /> -->
<input type="submit" id="submitQuery" class="greenBtn next" name="submitQuery" />
</div>
<!-- /.fieldBlock-->
</form:form>
Javascript
jQuery("form#addArtistForm")
.submit(function(event) {
event.preventDefault();
var isValid=$("#addArtistForm").valid();
if(isValid){
$("#addArtist #submitQuery").fadeOut(function(){
$("#addArtist #submitQuery").after('<img src="/ArtistBomb/resources/images/loading.gif" class="loadSpin" width="40" height="40" />');
var str = new FormData($("form#addArtistForm")[0]);
$.ajax({
type : "POST",
data : str,
url : "/ArtistBomb/artist/addNewArtist.htm",
async : true,
success : function(data) {
alert(data);
if(data=='Artist added successfully'){
//window.location.href = location.href;
window.location.reload();
}
else{
$("#addArtist .loadSpin").remove();
$("#addArtist #submitQuery").fadeIn();
}
},
cache : false,
contentType : false,
processData : false
});
});
}
});
谢谢!
我使用formdata提交表单,但在IE10和IE11中仍然抛出此异常
我是一名优秀的程序员,十分优秀!