Javascript 什么';这些代码怎么了?为什么不排序预览图片上传?
以下是html5多重上传文件的完整代码,带有可移除和预览图像 但我不知道在Javascript 什么';这些代码怎么了?为什么不排序预览图片上传?,javascript,jquery,html,file-upload,Javascript,Jquery,Html,File Upload,以下是html5多重上传文件的完整代码,带有可移除和预览图像 但我不知道在函数handleFileSelect(e)中,当选择两个以上的文件时,为什么会显示排序错误的预览图像?(虽然,它上传到我的文件夹正确排序,但我仍然希望它显示正确排序预览) 正名 #所选文件img{ 最大宽度:200px; 最大高度:200px; 浮动:左; 边缘底部:10px; } .删除{ 光标:指针; 颜色:红色; 字体大小:14px; 左边距:10px; } 用户名: 电子邮件: 多个文件: var selDiv=
函数handleFileSelect(e)
中,当选择两个以上的文件时,为什么会显示排序错误的预览图像?(虽然,它上传到我的文件夹正确排序,但我仍然希望它显示正确排序预览)
正名
#所选文件img{
最大宽度:200px;
最大高度:200px;
浮动:左;
边缘底部:10px;
}
.删除{
光标:指针;
颜色:红色;
字体大小:14px;
左边距:10px;
}
用户名:
电子邮件:
多个文件:
var selDiv=“”;
var-storedFiles=[];
$(文档).ready(函数(){
$(“#文件”)。在(“更改”,handleFileSelect);
selDiv=$(“#selectedFiles”);
美元(“#我的表格”)。关于(“提交”,手册);
$(“正文”)。在(“单击“,”.delete_img”,removeFile);
});
功能手柄文件选择(e){
var files=e.target.files;
var filesArr=Array.prototype.slice.call(文件);
forEach(函数(f){
如果(!f.type.match(“image.*)){
返回;
}
存储文件。推送(f);
var reader=new FileReader();
reader.onload=函数(e){
var html=“DEL
”+f.name+”
;
selDiv.append(html);
}
reader.readAsDataURL(f);
});
}
功能手柄(e){
e、 预防默认值();
var username=document.getElementById('username').value;//获取值จาก 表单输入
var email=document.getElementById('email')。值;
var data=new FormData();
data.append('username',username)//มาใส่ในajax对象formdataเพื่อเตรียมส่งเข้าฝั่ง服务器
数据。附加(“电子邮件”,电子邮件);
对于(var i=0,len=storedFiles.length;i可能文件的总上载大小超过了最大上载大小限制。通常为2MB。由于我在liveweave中测试了您的代码,所以我没有问题(5个图像)。请检查文件的总大小。大小是多少?但这与上载大小无关,因为它只是预览图像(上载前)尝试在liveweave中检查它。
<!doctype html>
<html>
<head>
<title>Proper Title</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<style>
#selectedFiles img {
max-width: 200px;
max-height: 200px;
float: left;
margin-bottom:10px;
}
.delete_img{
cursor:pointer;
color:red;
font-size:14px;
margin-left:10px;
}
</style>
</head>
<body>
<form id="myForm" method="post">
Username: <input type="text" name="username" id="username"><br/>
Email: <input type="text" name="email" id="email"><br/>
Multiple Files: <input type="file" id="files" name="files[]" multiple><br/>
<div id="selectedFiles"></div>
<input type="submit">
</form>
<script>
var selDiv = "";
var storedFiles = [];
$(document).ready(function() {
$("#files").on("change", handleFileSelect);
selDiv = $("#selectedFiles");
$("#myForm").on("submit", handleForm);
$("body").on("click", ".delete_img", removeFile);
});
function handleFileSelect(e) {
var files = e.target.files;
var filesArr = Array.prototype.slice.call(files);
filesArr.forEach(function(f) {
if(!f.type.match("image.*")) {
return;
}
storedFiles.push(f);
var reader = new FileReader();
reader.onload = function (e) {
var html = "<div><img src=\"" + e.target.result + "\" data-file='"+f.name+"' class='selFile' title='Click to remove'> <span class='delete_img'> DEL </span><br>" + f.name + "<br clear=\"left\"/></div>";
selDiv.append(html);
}
reader.readAsDataURL(f);
});
}
function handleForm(e) {
e.preventDefault();
var username = document.getElementById('username').value; //get value จาก form input
var email = document.getElementById('email').value;
var data = new FormData();
data.append('username', username); //มาใส่ในajax object formdata เพื่อเตรียมส่งเข้าฝั่งserver
data.append('email', email);
for(var i=0, len=storedFiles.length; i<len; i++) {
data.append('files[]', storedFiles[i]); //อย่าลืม []
}
var xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php', true);
xhr.onload = function(e) {
if(this.status == 200) {
console.log(e.currentTarget.responseText);
//alert(e.currentTarget.responseText + ' items uploaded.');
window.location = "http://www.google.com";
}
}
xhr.send(data);
}
function removeFile(e) {
var img = e.target.parentElement.querySelector("img")
var file = img.getAttribute('data-file');
for(var i=0;i<storedFiles.length;i++) {
if(storedFiles[i].name === file) {
storedFiles.splice(i,1);
break;
}
}
$(this).parent().remove();
}
</script>
</body>
</html>