Я пытаюсь исправить устаревший код загрузки изображений с помощью AngularJS. У меня есть страница HTML, которая содержит форму. Ниже приведена HTML часть кода.
<form name="testForm" ng-init="testfunc()" novalidate>
<div id="adduser_header">
<div>
<p><b>Add new user</b></p>
</div>
</div>
<div id="userInfo">
<div>
<label>First Name</label>
<input type="text" name="fname" required>
</div>
<div>
<label>Last Name</label>
<input type="text" name="lname" required>
</div>
<div>
<form id="imageuploadForm"
action="/Projectname/jersey/ImageUploader/uploadimage"
method="POST" enctype="multipart/form-data"
accept-charset="utf-8" name="submitForm">
<div>
<input id="imagename" type="text" readonly="readonly"
placeholder="Click browse to upload image">
<div id="uploadImgBtn" onclick="getImgFile()">
<span>Browse</span>
</div>
</div>
<input id="userID" name="userID" type="hidden">
<input id="userImage" name="userImage" type="hidden">
<input id="usertType" name="usertType" type="hidden">
<p style="display: none;">this is your file input tag, so i hide it!
i used the onchange event to fire the form submission</p>
<div><input id="uploadimgfile" type="file" value="upload"
required="required" autofocus="autofocus"
name="imgfile"
onchange="upImgFile(this, event)">
</div>
<input style="display: none;" type="submit" value="Send">
</form>
</div>
</div>
<div id="action_buttons">
<input id="save_user" value="Add User" type="button"
title="Add User"
ng-click="submitRegistrationForm()"
ng-disabled="testForm.$invalid">
<a ui-sref="home-admin" ng-click="return()">
<input id="canceltoreturn" value="Cancel" type="button" title="Cancel">
</a>
</div>
</form>
Я могу просмотреть и выбрать изображение без проблем. Моя проблема начинается, когда я пытаюсь отправить эту форму AngularJS. Когда я нажимаю Добавить пользователя , я сначала отправляю AngularJS форму с именем testForm , которая возвращает успех с идентификатором пользователя. Этот идентификатор передается следующему фрагменту кода ( legacy ):
uploadImage: function(id)
{
if($('#imageuploadForm').find('#userImage').val() != "")
{
$("#imageuploadForm").find("#userID").val(id);
var uploadstatus = null;
$("#imageuploadForm").ajaxSubmit({
success: function(data)
{
uploadstatus = data;
if(uploadstatus == "uploaded")
{
console.log("Uploaded Successfully!");
}
if(uploadstatus == "updated")
{
console.log("Updated Successfully!");
}
else
if(uploadstatus == "problem" || uploadstatus == "notuploaded")
{
console.log("Some problem occurred!");
}
$("#imagename").val("");
$('#imageuploadForm').find('#userImage').val("");
},
error: function(xhr, ajaxOptions, thrownError)
{
console.log(xhr.status);
}
});
}
else
{
alert("Please select some image to upload!")
}
}
Когда я отлаживаю код, он доходит до строки.
$("#imageuploadForm").ajaxSubmit
Но дальше ничего не происходит. Служба, упомянутая в атрибуте действия ( / Projectname / jersey / ImageUploader / uploadimage ), вообще не вызывается.
Этот ajaxSubmit хорошо работал, когда форма была чисто в HTML. (Также я использую jquery .form. js для функции ajaxSubmit.) Но так как я настроил код в AngularJS, загрузка изображений перестала работать. Что я здесь не так делаю? Я не могу этого понять. Как я могу решить эту проблему?