我有一个jQuery脚本通过ajax上传图像,我注意到由于某种原因,它上传图像两次。在ajax步骤期间,然后将它们作为隐藏值嵌入到表单中,然后当有人单击提交表单时,上载过程再次启动,而实际上不应该因为图像已经在服务器上。我看到它是因为我使用Chrome并显示“正在上传(19%)...”#39;当我点击提交时,再次在左下角等。这不是我的脚本,我对jQuery非常不好,所以我无法弄清楚错误是什么。这里有什么明显的东西会让它在提交时再次上传吗?
function media_sync(form_name, media_type, file_path, file_url, file_embed, nb_uploads, max_uploads, upload_id) {
var radio_buttons = [];
for (var i = 0; i < form_name.length; i++) {
if (form_name.elements[i].type == 'radio' && form_name.elements[i].checked == true) {
radio_buttons[form_name.elements[i].name] = form_name.elements[i].value;
}
}
var jsHttp = new JsHttpRequest();
var xmlHttp = GetXmlHttpObject();
if (jsHttp == null) {
alert("Browser does not support HTTP Request");
return;
}
var media_name = '';
switch (media_type) {
case 1:
media_name = 'ad_image';
break;
case 2:
media_name = 'ad_video';
break;
case 3:
media_name = 'ad_dd';
break;
}
var media_box_name = 'display_media_boxes_' + media_name;
file_embed = base64Encode(file_embed);
var url = relative_path + 'file_upload.php';
var action = url + '?do=add&media_type=' + media_type + '&file_url=' + file_url +
'&file_embed=' + file_embed + '&nb_uploads=' + nb_uploads + '&upload_id=' + upload_id;
var thumbnail_div = document.getElementById('display_media_boxes_' + media_name);
var new_content = document.createElement('div');
if (file_embed != '') {
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
var response = xmlHttp.responseText;
var results = response.split('|');
if (results[5] != '') {
alert(results[5]);
}
else {
new_content.innerHTML = results[3];
while (new_content.firstChild) {
thumbnail_div.appendChild(new_content.firstChild);
}
var hidden_div = document.getElementById('hidden_media_boxes');
var hidden_content = document.createElement('div');
hidden_content.innerHTML = '<input type="hidden" name="' + results[1] + '[]" id="hidden_' + results[2] + '" value="' + results[4] + '">';
while (hidden_content.firstChild) {
hidden_div.appendChild(hidden_content.firstChild);
}
nb_uploads++;
}
document.getElementById('item_file_url_' + media_type).value = '';
document.getElementById('item_file_embed_' + media_type).value = '';
if (nb_uploads >= max_uploads) {
document.getElementById('btn_upload_' + media_type).disabled = true;
document.getElementById('item_file_upload_' + media_type).disabled = true;
document.getElementById('item_file_url_' + media_type).disabled = true;
document.getElementById('item_file_embed_' + media_type).disabled = true;
}
document.getElementById('nb_uploads_' + media_type).value = nb_uploads;
}
};
xmlHttp.open("POST", action, true);
xmlHttp.send(null);
}
else {
jQuery.blockUI({
message: $('#uploading_image'),
css: {
top: '20%',
left: ($(window).width() - 400) /2 + 'px',
width: '400px'
}
});
var image_loading = document.createElement('div');
image_loading.innerHTML = '';
thumbnail_div.appendChild(image_loading);
jsHttp.onreadystatechange = function() {
if (jsHttp.readyState == 4) {
var response = jsHttp.responseText;
var results = response.split('|');
if (results[5] != '') {
alert(results[5]);
thumbnail_div.removeChild(image_loading);
setTimeout(jQuery.unblockUI, 500);
}
else {
new_content.innerHTML = results[3];
while (new_content.firstChild) {
thumbnail_div.replaceChild(new_content.firstChild, image_loading);
}
setTimeout(jQuery.unblockUI, 500);
var hidden_div = document.getElementById('hidden_media_boxes');
var hidden_content = document.createElement('div');
hidden_content.innerHTML = '<input type="hidden" name="' + results[1] + '[]" id="hidden_' + results[2] + '" value="' + results[4] + '">';
while (hidden_content.firstChild) {
hidden_div.appendChild(hidden_content.firstChild);
}
nb_uploads++;
}
document.getElementById('item_file_url_' + media_type).value = '';
document.getElementById('item_file_embed_' + media_type).value = '';
if (nb_uploads >= max_uploads) {
document.getElementById('btn_upload_' + media_type).disabled = true;
document.getElementById('item_file_upload_' + media_type).disabled = true;
document.getElementById('item_file_url_' + media_type).disabled = true;
document.getElementById('item_file_embed_' + media_type).disabled = true;
}
document.getElementById('nb_uploads_' + media_type).value = nb_uploads;
for (var i = 0; i < form_name.length; i++) {
if (form_name.elements[i].type == 'radio' && radio_buttons[form_name.elements[i].name] == form_name.elements[i].value) {
form_name.elements[i].checked = true;
}
}
}
};
jsHttp.open("POST", action, true);
jsHttp.send({file: file_path});
}
jQuery('#upload_form').attr('target', '_self');
}
HTML表单非常基本,有一堆隐藏的值字段只是变量和图片上传部分,如下所示:
<form id="upload_form" action="new.php" method="post" enctype="multipart/form-data" name="ad_create_form">
<input class="upload_button" type="file" name="item_file_upload_1" id="item_file_upload_1"
onchange="media_sync(ad_create_form, 1,
this.form.item_file_upload_1,
document.getElementById('item_file_url_1').value,
document.getElementById('item_file_embed_1').value,
document.getElementById('nb_uploads_1').value,
5,
'000000015');" />
<input name="finish" id="finish" value="Add" type="submit" class="btn">
</form>
非常感谢你,如果有人能发现造成这种情况的原因! :)
答案 0 :(得分:2)
你有一个&#34; onchange&#34;它触发media_sync函数,然后运行Ajax发布数据。然后你还有表单本身提交数据。这就是为什么它上传两次,一次用于Ajax,一次用于表单提交。你需要选择一个而不是两个。我不确定您要使用哪一个,因为它取决于您希望页面的工作方式。我的猜测是Ajax足够了,所以删除表单提交(因为表单中唯一的东西是一个输入)。