【发布时间】：2018-02-19 12:06:42
【问题描述】：
我的上传预览脚本有问题，我找不到。每当我单击上传图片按钮并一次选择例如 3 张图片时，它会将所有图片上传到我的数据库而不会出错。但是当我一张一张选择图片时，它只是将一张图片上传到我的数据库中。
我尝试使用 echo count($_files) 和 exit 函数对其进行测试，这显然不是 php 部分有问题。
var count = 0;
function handleFileSelect(evt) {
var $fileUpload = $("input#Photofile[type='file']");
count = count + parseInt($fileUpload.get(0).files.length);
if (parseInt($fileUpload.get(0).files.length) > 4 || count > 3) {
alert("You can only upload a maximum of 3 photos");
count = count - parseInt($fileUpload.get(0).files.length);
evt.preventDefault();
evt.stopPropagation();
return false;
}
var files = evt.target.files;
for (var i = 0, f; f = files[i]; i++) {
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
var span = document.createElement('span');
span.innerHTML = ['<img class="thumb mrm mts" src="', e.target.result, '" title="', escape(theFile.name), '"/><span class="remove_img_preview"></span>'].join('');
document.getElementById('list').insertBefore(span, null);
};
})(f);
reader.readAsDataURL(f);
}
}
$('#Photofile').change(function(evt) {
handleFileSelect(evt);
});
$('#list').on('click', '.remove_img_preview', function() {
$(this).parent('span').remove();
//this is not working...
var i = array.indexOf($(this));
if (i != -1) {
array.splice(i, 1);
}
// tried this too:
//$(this).parent('span').splice( 1, 1 );
count--;
});form .post-image-collection {
margin: -20px 0px 0px -20px;
overflow: hidden;
}
form .post-image {
position: relative;
float: left;
height: 152px;
width: 170px;
background: #f2f2f2;
border: 1px dashed #ccc;
padding: 0;
border-radius: 4px;
text-align: center;
cursor: pointer;
}
.mrm {
margin-right: 20px;
}
.mts {
margin-top: 10px;
}
form .post-image img {
max-width: 80px;
max-height: 80px;
width: auto;
height: auto;
vertical-align: top;
border-radius: 3px;
overflow: hidden;
}
form .post-image .icon-camera {
display: none;
}
form .post-image input {
position: absolute;
z-index: 2;
opacity: 0;
width: 100%;
height: 100%;
}
form .post-image.empty {
position: relative;
float: left;
height: 130px;
width: 130px;
background: #f2f2f2;
border: 1px dashed #ccc;
padding: 0;
border-radius: 4px;
text-align: center;
cursor: pointer;
vertical-align: top;
}
form .post-image.empty .icon-camera {
display: block;
height: 30px;
line-height: 30px;
left: 40%;
position: absolute;
text-align: center;
top: 50%;
width: 30px;
cursor: inherit;
margin: -15px 0px 0px -15px;
}
form .post-image.empty .icon-camera img {
height: 60px;
width: 60px;
}
form .post-image.empty input {
cursor: pointer;
}
form .post-image p,
.file_container-orange p {
margin: 10px 0;
margin: 1rem 0;
text-align: center;
font-family: "OpenSansSemiBold", sans-serif;
}
.uppercase {
text-transform: uppercase;
}
#list {
float: left;
}
.thumb {
height: 130px;
width: 130px;
margin-right: 20px;
margin-top: 10px;
}
.remove_img_preview {
position: relative;
top: -46px;
right: 40px;
font-size: 20px;
line-height: 1;
padding: 4px 6px;
background: white;
border-radius: 0px 0px 0px 3px;
text-align: center;
cursor: pointer;
}
.remove_img_preview:before {
content: "×";
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="row row-images">
<label for="image">Images*</label>
<div class="column image_container">
<div class="post-image-collection">
<label id="list"></label>
<label class="post-image post-image-placeholder mrm mts empty">
<input type="file" id="Photofile" name="images[]" required="required" multiple />
<span class="icon-camera"><img src="https://cdn.onlinewebfonts.com/svg/img_134042.png"></span>
<p class="uppercase">Photo</p>
</label>
</div>
</div>
</form>请有人检查我的脚本并告诉我可能是什么问题？
【问题讨论】：
-
@Hi Rory。任何可能的问题可能是什么解释？
-
问题是你只有一个输入，当你选择一个图像时，你的JS会在HTML上创建一个图像的缩影，但这并没有提交给服务器，它只是视觉的。
-
一种（可能）更好的方法是隐藏
handleFileSelect上的文件输入并创建一个新的新文件输入，以便用户上传更多文件。 -
嗨，dinei，对不起，这两天我一直在休息。我明白你的意思，但老实说我对 Javascript 了解不多。
-
道吉没问题。我做了一个回答，展示了我建议的方法，看看。
标签： javascript jquery jquery-file-upload