JavaScript刪除要從文件列表中上傳文件

有代碼https://jsfiddle.net/bfzmm1hc/1一切看起來不錯，但我想從集中刪除一些文件。JavaScript刪除要從文件列表中上傳文件

我已經找到了這些：

我知道FileList對象是隻讀的，這樣我就可以將文件複製到一個新的數組。但是，我應該如何處理這個新的File對象？我無法將其分配給files媒體資源...

2016-05-31 user1128677

你打算如何處理更新的'input'，上傳文件？ –

是的，我希望能夠上傳已編輯的文件陣列 – user1128677

您想上傳_are_圖片還是_aren't_圖片？另外，你是否想限制前四個文件，或者你是否想要處理所有這些文件？ –

由於您無法編輯只讀input.files屬性，因此您必須上傳表格using XMLHttpRequest and send a FormData object。我也將向你展示如何使用URL.createObjectURL更容易從File對象中獲取URI：

var SomeCl = { 
 
    count: 0, 
 
    init: function() { 
 
    $('#images').change(this.onInputChange); 
 
    }, 
 
    onInputChange: function() { 
 
    // reset preview 
 
    $('.container').empty(); 
 
    // reset count 
 
    SomeCl.count = 0; 
 
    // process files 
 
    SomeCl.processFiles(this.files, function(files) { 
 
     // filtered files 
 
     console.log(files); 
 

 
     // uncomment this line to upload the filtered files 
 
     SomeCl.upload('url', 'POST', $('#upload').get(0), files, 'images[]'); 
 
    }); 
 
    }, 
 
    processFiles: function(files, callback) { 
 
    // your filter logic goes here, this is just example 
 

 
    // filtered files 
 
    var upload = []; 
 

 
    // limit to first 4 image files 
 
    Array.prototype.forEach.call(files, function(file) { 
 
     if (file.type.slice(0, 5) === 'image' && upload.length < 4) { 
 
     // add file to filter 
 
     upload.push(file); 
 
     // increment count 
 
     SomeCl.count++; 
 
     // show preview 
 
     SomeCl.preview(file); 
 
     } 
 
    }); 
 

 
    callback(upload); 
 
    }, 
 
    upload: function(method, url, form, files, filename) { 
 
    // create a FormData object from the form 
 
    var fd = new FormData(form); 
 
    // delete the files in the <form> from the FormData 
 
    fd.delete(filename); 
 
    // add the filtered files instead 
 
    fd.append(filename, files); 
 

 
    // demonstrate that the entire form has been attached 
 
    for (var key of fd.keys()) { 
 
     console.log(key, fd.getAll(key)); 
 
    } 
 

 
    // use xhr request 
 
    var xhr = new XMLHttpRequest(); 
 
    xhr.open(method, url, true); 
 
    xhr.addEventListener('progress', function(e) { 
 
     console.log('lengthComputable', e.lengthComputable); 
 
     console.log(e.loaded + '/' + e.total); 
 
    }); 
 
    xhr.addEventListener('load', function(e) { 
 
     console.log('uploaded'); 
 
    }); 
 
    xhr.addEventListener('error', function(e) { 
 
     console.log('this is just a demo'); 
 
    }); 
 
    xhr.send(fd); 
 
    }, 
 
    preview: function(file) { 
 
    // create a temporary URI from the File 
 
    var url = URL.createObjectURL(file); 
 
    // append a preview 
 
    $('.container').append($('<img/>').attr('src', url)); 
 
    } 
 
}; 
 

 
SomeCl.init();

.container img { 
 
    max-width: 250px; 
 
    max-height: 250px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="upload"> 
 
    <input name="other" type="hidden" value="something else"> 
 
    <input name="images[]" id="images" multiple="multiple" type="file"> 
 
    <div class="container"></div> 
 
</form>

來源

2016-05-31 14:25:54

哇，看起來不錯，非常感謝，虐待看看，所以沒有辦法讓它沒有阿賈克斯？ – user1128677

@ user1128677不幸的是，沒有。您的另一種選擇是向表單提供自定義驗證，以便用戶只選擇應該上傳的文件。 –

我找到了一個解決方法。這完全不需要AJAX的請求，並且表單可以發送到服務器。基本上，您可以創建hidden或text輸入，並將它的value屬性設置爲處理選定文件後創建的base64字符串。

<input type=hidden value=${base64string} />

你可能會考慮這個想法創建多個輸入文件，而不是輸入text或hidden。這是行不通的，因爲我們不能爲它分配一個值。

這種方法將包括在發送到數據庫並忽略你可以輸入文件中的數據輸入文件：在後端

不考慮場;
您可以在序列化表單之前將disabled屬性設置爲輸入文件;
發送數據前刪除DOM元素。

當您想要刪除文件時，只需獲取元素的索引並從DOM中刪除輸入元素（文本或隱藏）。

要求：

你需要寫文件轉換爲Base64並存儲所有文件的數組裏面，只要輸入文件觸發change事件的邏輯。

優點：

這將基本上給你大量的控制，你可以過濾，比較文件，檢查文件大小，MIME類型，等等..

來源

2017-08-30 11:08:22

JavaScript刪除要從文件列表中上傳文件

回答

相關問題