使用JavaScript动态上传背景中的文件 [英] Dynamically uploading a file in background with JavaScript

问题描述

我试图在后台上传文件。我不能使用任何框架，所以我必须手动。该页面已经包含一个表单，文件输入字段位于该表单中，所以我不能在表单中嵌入表单，所以我需要移动文件输入。

我使用的代码的问题是，它似乎并没有提交，我根本没有看到任何网络活动。任何人都可以在这里发现任何错误？

 < form> 
 ... 
< input id =photo-file-inputtype =file/> 
< button type =buttononClick =uploadBackground（'photo-file-input'）;>上传< / button> 
 .... 
< / form> 
 
函数uploadBackground（fileInputId）
 {
 var iframe = createIframe（'TEST'）; 
 var form = createUploadForm（'TEST'，'upload.php'）; 
 var fileInput = document.getElementById（fileInputId）; 
 var fileInputParent = fileInput.parent; 
 
 //将文件输入移动到生成的表单
 form.appendChild（fileInput）; 
 form.submit（）; 
 
 iframe.onload = function（）
 {
 alert（'file was uploaded'）; 
 //把文件输入放回
 fileInputParent.appendChild（fileInput）; 
 
 //清理生成的元素
 iframe.parent.removeChild（iframe）; 
 form.parent.removeChild（form）; 
 
 
 
 $ b函数createUploadForm（target，action）
 {
 var form = document.createElement（'form'）; 
 
 form.display ='none'; 
 form.target = target; 
 form.action = action; 
 form.method ='POST'; 
 form.enctype ='multipart / form-data'; 
 
退货表单; 
} 
 
函数createIframe（名称）
 {
 var iframe; 
 
 try 
 {
 iframe = document.createElement（'< iframe name ='+ name +'>'）; 
 
 catch（ex）
 {
 iframe = document.createElement（'iframe'）; 
 iframe.name = name; 
} 
 
返回iframe; 
 
  

解决方案

输入元素并设置/保持其值。这是出于安全原因。没有理由为什么你需要创建一个新的表单。只需在页面上添加一个iframe，将表单的目标设置为iframe名称并提交原始表单。

I'm trying to upload files in the background. I am not able to use any frameworks so I have to do manually. The page already contains a form, and the file input fields are located within that form, so I can't embed a form in a form so I need to move the file input around.

The problem with the code I'm using is that it doesn't seem to actually submit, I don't see any network activity at all. Can anyone spot anything wrong here?

<form>
...
  <input id="photo-file-input" type="file"/>
  <button type="button" onClick="uploadBackground('photo-file-input');">Upload</button>
....
</form>

function uploadBackground(fileInputId)
{
    var iframe = createIframe('TEST');
    var form = createUploadForm('TEST', 'upload.php');
    var fileInput = document.getElementById(fileInputId);
    var fileInputParent = fileInput.parent;

    //move file input into generated form
    form.appendChild(fileInput);
    form.submit();

    iframe.onload = function()
    {
        alert('file was uploaded');
        //put the file input back where it was
        fileInputParent.appendChild(fileInput);

        //clean up generated elements
        iframe.parent.removeChild(iframe);
        form.parent.removeChild(form);
    }
}


function createUploadForm(target, action)
{
    var form = document.createElement('form');

    form.display = 'none';
    form.target = target;
    form.action = action;
    form.method = 'POST';
    form.enctype = 'multipart/form-data';

    return form;
}

function createIframe(name)
{
    var iframe;

    try
    {
            iframe = document.createElement('<iframe name="' + name + '">');
    }
    catch (ex)
    {
            iframe = document.createElement('iframe');
            iframe.name = name;
    }

    return iframe;
}

解决方案

You can not copy a file input element and set/keep its value. It is for security reasons. There is no reason why you need to create a new form. Just append an iframe to the page, set the target of form to the iframe name and submit the original form.

这篇关于使用JavaScript动态上传背景中的文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！