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

Inside javascript need to change value of a hidden input field

本文关键字:输入 隐藏 字段 javascript      更新时间:2023-09-26

我已经尝试了一些事情,但它不工作。有人可以帮助我理解这个代码的问题。这是一个文件上传脚本。我用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>

我发布数据后隐藏字段仍然为空

我看到你的错误了:

你有两个变量叫做uploads。一个是div的实例,另一个是数组。

你所做的基本上是分配一个新的类型每当你启动函数,最后你没有数组来提取数据。

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

试试这样写:

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

看到mdn