Question

我尝试过几件事，但它不起作用。有人可以帮助我解决这个代码的问题。这是一个文件上传脚本。我将它与codeigniter一起使用。我的要求是在用户上传文件（现在正常工作）之后，这些文件名应添加到隐藏字段中。

<input type="hidden" name="extra_images" value="" />

<label for="deal_duration">Deal Extra Images</label>
<div id="uploads"></div>
<div class="dropzone" id="dropzone">Drop files here to upload</div>



<script type="text/javascript">
(function(){
    var dropzone = document.getElementById('dropzone');
    var uploads = new Array();
    var hidden = document.getElementsByName('extra_images');

    var displayUploads = function(data){
        var uploads = document.getElementById('uploads'),
                        anchor,
                        x;
        var errors = new Array();
        for(x=0;x<data.length;x=x+1){
            if((typeof(data[x].file) === 'undefined') && (typeof(data[x].error) != 'undefined'))
            {
                errors.push(data[x].error);
            }
            else
            {
                anchor = document.createElement('a');  
                anchor.href = 'http://localhost/project-cg/'+ data[x].file;
                anchor.innerText = data[x].name;
                anchor.target = '_blank';
                uploads.appendChild(anchor);
                uploads.push(data[x].data[x].name);
            }
        }
        if(errors.length > 0){
            alert(errors);   
        }
        if(uploads.length > 0){
            //This is what I tried so far.But its not working
            hidden.value = uploads.join("|");  
        }              
    }

    var upload = function(files){
        var formData = new FormData(),
            xhr = new XMLHttpRequest(),
            x;
        for(x=0;x<files.length;x=x+1){
            formData.append('file[]',files[x]);
        }

        xhr.onload = function(){
            var data = JSON.parse(this.responseText);
            displayUploads(data);    
        }
        xhr.open('post','http://localhost/project-cg/image_upload');   
        xhr.send(formData);
    }

    dropzone.ondrop = function(e){
       e.preventDefault();
       this.className = 'dropzone'; 
       upload(e.dataTransfer.files);               
    }

    dropzone.ondragover = function(){
        this.className = 'dropzone dragover';
        return false;
    }
    dropzone.ondragleave = function(){
        this.className = 'dropzone';
        return false;
    } 
}());
</script>

发布数据后，隐藏字段仍为空。

Answer 1

我看到了你的错误：

您有2个名为uploads的变量。一个是div的实例，另一个是数组。

你基本上做的是每当你启动函数时为它分配一个新类型，最后你没有数组来从中提取数据。尝试重命名它们。

Answer 2

var hidden = document.getElementsByName('extra_images'); // returns a list of nodes

尝试这样的事情：

hidden[0].value = uploads.join("|");

请参阅mdn

在javascript里面需要更改隐藏输入字段的值

2 个答案: