画像フィールドを持つフォームがあり、jquery フォーム プラグインを使用して、フィールドの変更時に ajax 経由で画像をアップロードします。ここで私の問題が発生します。誰かが画像を入力してフォームにロードすると、フォームが再度送信されるたびに同じ画像が再度アップロードされ、フォームを正常に送信できなくなります。jqueryフォームプラグインにフォーム送信を処理させたいかのように機能します。
これが私のjavascriptです。
<script src="<?php echo DOMAIN.LIBRARY; ?>js/jquery.form.js" type="text/javascript"></script>
<script src="<?php echo DOMAIN.LIBRARY; ?>uploader/jcrop/js/jquery.color.js" type="text/javascript"></script>
<script src="<?php echo DOMAIN.LIBRARY; ?>uploader/jcrop/js/jquery.Jcrop.js" type="text/javascript"></script>
<link rel="stylesheet" href="<?php echo DOMAIN.LIBRARY; ?>uploader/jcrop/css/jquery.Jcrop.css" type="text/css" />
<script>
$(document).ready(function(e) {
$("#fk_profile_form").bind("keypress", function(e) {
if (e.keyCode == 13) return false;
});
var options = {
url: "<?php echo DOMAIN.LIBRARY; ?>uploader/ajaxUpload.php", // override for form's 'action' attribute
success: showResponse // post-submit callback
};
var $loader = $('<div class="progress progress-striped active" style="width: 200px;"><div class="bar" style="width: 100%;">Uploading...</div></div>');
$(document).on("change", "#photofield", function() {
$loader.prependTo('#imageArea');
$('#fk_profile_form').ajaxForm(options).submit();
});
function showResponse(responseText, statusText, xhr, $form) {
// dialog function
var $uploadedImage = $('<img src="<?php echo DOMAIN; ?>'+responseText+'" id="uploadedImage"></img>').appendTo('#imageArea .controls');
$('<br /><a href="javascript:;" id="removeImage">Click Here To Upload A Different Photo</a>').appendTo('#imageArea .controls');
$uploadedImage.Jcrop({
// start off with jcrop-light class
bgOpacity: 0.5,
bgColor: 'white',
addClass: 'jcrop-light',
allowResize: true,
aspectRatio: 1,
setSelect: [0,0,300,300],
minSize: [300,300],
onSelect: updateCoords
});
$loader.remove();
$('#ajaxImageUpload').show();
$('#photofield').next('span').hide();
$('#photofield').hide();
}
function updateCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};
function checkCoords()
{
if (parseInt($('#w').val())) return true;
alert('Please select a crop region then press submit.');
return false;
};
$(document).on("click", "#removeImage", function(e) {
e.preventDefault();
$('.jcrop-holder').remove();
$('#photofield').show();
$('#photofield').next('span').show();
$(this).remove();
$('#photofield').val('');
});
$('#sc').on('click', function() {
alert($('#x').val()+','+$('#y').val()+','+$('#w').val()+','+$('#h').val());
});
$(".other_option").each(function(i) {
if($(this).val() != 'other') {
$(this).next('input').hide();
} else {
$(this).next('input').show();
}
});
$(document).on("change", "select[name=question[]]", function() {
if($(this).val() == 'other') {
$(this).next("input").show();
} else {
$(this).next("input").hide();
}
});
$(document).on("change", "input:checkbox[name=fk_rainbow_bridge]", function() {
if (!$(this).is(':checked')) {
$('#fk_dob').show();
} else {
$('#fk_dob').hide();
}
});
function checkField(field, value) {
$.post("<?php echo DOMAIN.INCLUDES; ?>ajax/profileForm.php", { fieldName: field, fieldValue: value },
function(data){
if(data) {
$('input[name='+field+'], select[name='+field+'], textarea[name='+field+']').next('span').text(data);
$('#'+field).removeClass('success').addClass('error');
} else {
$('input[name='+field+'], select[name='+field+'], textarea[name='+field+']').next('span').empty();
$('#'+field).removeClass('error').addClass('success');
}
});
}
$(document).on("focusout", "input[name=fk_name]", function(){
checkField('fk_name', $(this).val());
});
$(document).on("focusout", "input[name=fk_breed]", function(){
checkField('fk_breed', $(this).val());
});
$(document).on("focusout", "select[name=fk_gender]", function(){
checkField('fk_gender', $(this).val());
});
$(document).on("focusout", "select[name=fk_dob_month]", function(){
checkField('fk_dob_month', $(this).val());
});
$(document).on("focusout", "textarea[name=fk_about]", function(){
checkField('fk_about', $(this).val());
});
});
</script>
何か案は？