javascript - 一页上的许多多个图像上传按钮的相同jquery
问题描述
我使用 PHP 表单,我想在其中提交带有多个图像上传按钮的表单。在我的页面中有许多多个上传按钮。我想对所有具有不同名称和 id 的多个图像上传按钮使用相同的 jquery。
我的代码是:
<input type="file" id="files" name="dog_img[]" class="upload-img" onchange="readURL(this);" multiple>
<input type="file" id="files1" name="dog_img1[]" class="upload-img" onchange="readURL(this);" multiple>
<input type="file" id="files2" name="dog_img2[]" class="upload-img" onchange="readURL(this);" multiple>
<input type="file" id="files3" name="dog_img3[]" class="upload-img" onchange="readURL(this);" multiple>
jQuery代码是:
$(document).ready(function() {
$('.upload-img').change(function () {
var co =0;
var len =5;
for (var i=0; i < len; i++)
{
(function (j, self)
{
var reader = new FileReader()
reader.onload = function (e) {
var image = new Image();
image.src = e.target.result;
image.onload = function () {
var height = this.height;
var width = this.width;
if (height < 700 || width < 1000) {
alert("Height and Width must not exceed 1024px.");
return false;
}
};
co++;
$('.gallery-row').append('<div class="col-md-2" id="pip">
<span id="'+[co]+'" data-id="'+[co]+'" class="click-form">
<img class="imageThumb" src="' + e.target.result
+ '"/>' + '</span><span data-id="'+[co]+'" class="remove">X
</span></div>');
}
reader.readAsDataURL(self.files[j])
})
(i, this);
}
});
});
解决方案
试试这个代码,你会得到文件长度
$(document).ready(function() {
$('.upload-img').bind('change',function () {
var co =0;
var len =5;
var num_of_images = this.files.length;
alert(num_of_images);
for (var i=0; i < len; i++)
{
(function (j, self)
{
var reader = new FileReader()
reader.onload = function (e) {
var image = new Image();
image.src = e.target.result;
image.onload = function () {
console.log("image",image);
var height = this.height;
var width = this.width;
if (height < 700 || width < 1000) {
alert("Height and Width must not exceed 1024px.");
return false;
}
};
co++;
$('.gallery-row').append('<div class="col-md-2" id="pip"> <span id="'+[co]+'" data-id="'+[co]+'" class="click-form"> <img class="imageThumb" src="' + e.target.result + '"/>' + '</span><span data-id="'+[co]+'" class="remove">X </span></div>');
reader.readAsDataURL(self.files[j])
}
})
(i, this);
}
});
});
我改变了这个var num_of_images = this.files.length;
而不是var num_of_images = $(".upload-img")[0].files.length;
更新的小提琴
推荐阅读
- python - 连接条件
- google-data-studio - Google DataStudio 中是否支持带有自定义连接器的第 3 方 Oauth2 提供程序?
- sql - 无法从 PostgreSQL 中的 information_schema.tables 中选择 table_name
- javascript - 在 NodeJS 中的 while 循环中读取文件
- python - 没有名为 pathlib2 的模块
- php - 基于月份 PHP MYSQL 组合 JSON 对象
- android - 在 Android Go 中修改 Google SetupWizard
- python-2.7 - 如何使用 urllib2 将文件从桌面上传到 jupyter notebook?
- java - 带有特殊字符的 Solr 字符串字段搜索
- git - 如何将现有项目导入到 intellij idea 中现有的私有 github 存储库?