Html多文件输入 - javascript访问和删除文件 [英] Html multiple file input - javascript access and delete files

问题描述

我试图从html 文件输入中删除值。

Im trying to delete values from a html file input.

<input type="file" name="images" id="i1" class="imageup" multiple />

我似乎无法访问.files数组来删除其中一个值。我曾尝试使用隐藏的输入类型与文件值，但我不认为这可以做....所以我试图访问输入元素删除！

I cant seem to access the .files array to delete one of the values. I had tried using a hidden input type with the file value but i dont think this can be done....so im trying to access the input element to delete!

所有代码都有一个小提琴。有很多东西可以复制这种情况，但控制删除事件的代码大约是js的一半。

There is a fiddle below of all the code. There is a lot there to replicate the situation but the code controlling the delete event is about half way down the js.

http://jsfiddle.net/dheffernan/ryrfS/1

任何人都有一种访问方法，例如多个文件上传和删除的第三个输入值？

下面的js代码 - 使用.splice尝试。

The js code below- using .splice attempt.

var files=jQuery('#i'+inputid)[0].files; 

        for (var i = 0; i < files.length; i++) {
        console.log(files[i].name);
        }
    var inputname= 3;
    jQuery('#i'+inputid).splice(inputname, 1); 
 // no files are being deleted!!!

    console.log('2nd test');
    var files=jQuery('#i'+inputid)[0].files; 

        for (var i = 0; i < files.length; i++) {
        console.log(files[i].name);
        }

    }

推荐答案

使用html5 FormData解决方案：

using html5 FormData solution:

基本上将图像添加到FormData，使用ajax提交并返回我上传它们的网址（我包括用于wordpress的php） ）。我从js代码和php代码中删除了所有数据验证以保持简短+我仍然需要针对ie9 /较旧浏览器的解决方法。

Basically add the images to FormData, submit it using ajax and return the urls from where i uploaded them (i included the php for wordpress). I removed all data validation from js code and php code to keep it short + i still need a workaround for ie9 / older vers of browsers.

jQuery代码：

jQuery(document).on('change', '.imageup', function(){

        var id= jQuery(this).attr('id');
        var length= this.files.length;

        if(length>1) {// if a multiple file upload



        var images = new FormData();
        images.append('action', 'uploadimg'); //wordpress specific add functionname

            jQuery.each(event.target.files, function(key, value ){

                        images.append(key, value);

            });



        jQuery.ajax({
            url: '/wp-admin/admin-ajax.php',
            type: 'POST',
            data: images, 
            cache: false,
            processData: false, 
            contentType: false, 
                success: function(data) {
                    var obj= JSON.parse(data);


                    jQuery.each(obj,function(key, value){
                        if(key!='errors') {
                        var ind = value.lastIndexOf("/") + 1;
                        var filename = value.substr(ind);

                        //do something here with filename
                        console.log(filename);
                        }
                    });

        }//end of success function
        }); //end ajax


    } 
});

php code wordpress，如果不使用wordpress更改上面的url等等。

php code wordpress, if not using wordpress change the above url, etc..

function uploadimg() {

$error = false;
$files = array();
if ( ! function_exists( 'wp_handle_upload' ) ) require_once( ABSPATH . 'wp-admin/includes/file.php' );
$upload_overrides = array( 'test_form' => false );
$url=array();



foreach($_FILES as $file){

    $uploadimage= $file;

    $movefile = wp_handle_upload( $uploadimage, $upload_overrides );
        if ( $movefile ) {

            if($movefile['url']) {
                $url[]=$movefile['url'];
            } else {
                $url['errors'][]="error ".$movefile['file']." is not valid";
            }
    } else {

    }
}


$url['errors'][]="error is not valid";
echo json_encode($url);
exit; 



}

add_action('wp_ajax_uploadimg', 'uploadimg');
add_action('wp_ajax_nopriv_uploadimg', 'uploadimg');

这篇关于Html多文件输入 - javascript访问和删除文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！