将上传按钮从输入更改为跨度时,图像上传不起作用

image upload not working when changing upload button from input to span

本文关键字:不起作用 图像 按钮 输入      更新时间:2023-09-26

我有以下图像上传脚本:

function upload_media_async(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 + 'ajax_files/upload_file.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('div_file_' + media_type).innerHTML = document.getElementById('div_file_' + media_type).innerHTML;
            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: '<p style="padding: 10px; font-size: 16px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold;">' + upl_progress_msg + '</p>'});
      var image_loading = document.createElement('div');
      image_loading.innerHTML = '<img src="' + relative_path + 'images/loading-media.gif">';
      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('div_file_' + media_type).innerHTML = document.getElementById('div_file_' + media_type).innerHTML;
            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});
   }
}

当使用这个HTML:时,这很好

<div id="div_file_1">
<input name="item_file_upload_1" id="item_file_upload_1" style="width: 250px;"
onchange="upload_media_async(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, 
'A_571');" type="file">
</div>

现在,我将INPUT封装在SPAN中,以便对其进行样式设置:

<div id="div_file_1">
<span class="btn btn-file" name="item_file_upload_1" 
id="item_file_upload_1" style="width: 250px;" 
onchange="upload_media_async(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, 
'A_571');">
<input type="file">
</span>
</div>

突然上传就不起作用了。当我点击选择一个文件时,它什么也不做。。。它就在那里。即使在INPUT周围有SPAN,我也必须更改什么才能使其工作?

this.form.item_file_upload_1中,this是指跨度。因此this.form是未定义的。我们需要以另一种方式访问表单。您还需要将nameid移回它们的<input>。这应该会让你走上正确的道路。