Javascript (Jquery lib 1.9.1) Mutli file-upload ajax delete
Javascript (Jquery lib 1.9.1) Mutli file-upload ajax delete files failing
我已经开始编写这个脚本,它允许您一次上传多个文件。所以我还没有进入上传部分,而只是文件存储等。
到目前为止,我已经完成了文件添加,添加文件后,它将创建一个div,以便用户可以看到他将要上传的文件。
工作得很好。
现在我为每个div 添加一个 id,例如:<div id="file_filename" class="files">Filename</div>
现在,如果您单击文件名,我想将其删除。
所以我添加了一个文件删除功能,如下所示:
(我从 document.body 加载,因为它不是自然的div(
$(document.body).on("click", ".files", function(e) {
console.log("Sent id: " + e.target.id);
removeFile(e.target.id);
});
function removeFile(file) {
var split = file.split("file_");
console.log("Now going to loop for file: " + file);
console.log("Splitted version: " + split[1]);
for (i = 0; i < images.length; i++) {
if (images[i].name != split[1]) {
continue;
}
console.log("removed " + split[1] + " with index: " + i + " and file name: " + images[i].name);
images.pop(i + 1);
}
updateDivs();
console.log("files left: ");
for (i = 0; i < images.length; i++) {
console.log(images[i].name);
}
}
基本上,它获取单击的类的 ID,并将 id 发送到 removeFile 函数。removeFile 函数将拆分文本,以便在file_
之后获取文件的名称
然后我遍历图像数组并检查名称是否相等,如果是,请删除该文件并重新加载div。
重新加载divs功能:
function updateDivs() {
var divs;
for (i = 0; i < images.length; i++) {
divs = (divs != null) ? divs + "<div id='file_" + images[i].name + "'class='files'>" + images[i].name + "</div>" : "<div id='file_" + images[i].name + "'class='files'>" + images[i].name + "</div>";
}
$("#myImages").html(divs);
}
如您所见,我有很多日志正在更新,因此删除后,我得到此日志:
Sent id: file_images.jpg upload.js:82
Now going to loop for file: file_images.jpg upload.js:63
Splitted version: images.jpg upload.js:64
removed images.jpg with index: 0 and file name: images.jpg upload.js:69
files left: upload.js:75
images.jpg
问题:
如果你注意到,我点击了图像.jpg,然后它说它删除了图像.jpg,但随后它说文件留下:图像.jpg。
它没有删除图像.jpg而是删除了我上传的其他文件。
我已经尝试了我所知道的一切,我知道自己解决这些问题是最好的,但这个问题对我来说毫无意义。
我在那里做错了什么?
编辑:顺便说一下,图像[0] = 图像.jpg,我先上传了它。
不知道您的图像数组是什么样子的,这可能不是 100% 正确的,但我怀疑您的问题与行images.pop(i + 1);
有关
.pop()
不接受任何参数,只从数组中删除最后一项。 如果要按索引从数组中删除元素,请使用如下splice()
:
images.splice(i-1, 1);
(这将删除 for 循环当前索引处的 1 个项目(
举个例子:
<script type="text/javascript">
var images = ["banana", "orange", "apple"];
images.splice(1,1); // Will remove 1 item at position 1 (orange)
alert(images); // Should read: "banana, apple"
</script>
希望这有帮助。
- File Upload事件上下文和javascript
- 使用jQuery File Upload实现所需的用户登录
- File Upload & Google Protobuf
- 如何使用jQuery File Upload查找图像宽度和高度
- 在jQuery File upload插件中设置变量上传路径
- 单击页面中的任何按钮时,使用Jquery file Upload时都会打开文件对话框
- AngularJS angular-file-upload 无法将数据上传到 WebAPI 2 CORS
- 我把sql语句存储在数据库中的地方,用于blueimp / jQuery-File-Upload
- 使用 jQuery File Upload + Carrierwave + Rails 4 启用异步文件上传
- ng-file-upload v12.0.1 - 在生成缩略图时显示临时“加载”图标
- ng-file-upload + 将多个文件数组空发送到服务器 (sails)
- Angular / nodejs ng-file-upload - 文件加载在 angular 上,但在 nodejs
- blueimp jQuery-File-Upload不起作用
- jquery-file-upload插件卡在无限循环中,在2GB后重新发送相同的数据
- jQuery-File-Upload 取消 javascript 上传
- 如何使用回形针,角度JS,ng-file-upload在Rails中制作可选附件
- 如何使用javascript和jquery-file-upload检测损坏的非常大的图像文件
- Javascript (Jquery lib 1.9.1) Mutli file-upload ajax delete
- 以编程方式更改 jQuery File Upload (blueimp) 的预览最大宽度/高度
- AJAX File Upload with XMLHttpRequest