我在那里。我想知道如何制作一个在左上角有一个容器或盒子的表单。
表单上传了fille，用户在文件上传框中选择了照片的时刻（未提交），照片将显示在该照片容器/盒子上。
你可以给我指导吗？感谢答案 0 :(得分：1)
当然这是可能的。您需要使用 FileReader API（适用于IE 9+）。
以下是相同的演示：
<html>
<head>
<title>File Reader Demo</title>
<style type="text/css">
#err{
background:#faa;
color:#fff;
border:2px solid #f00;
padding:5px;
text-align:center;
}
#preview{
width:200px;
height:200px;
border:2px solid #444;
background:#eee;
text-align:center;
font-size:24px;
color:cyan;
}
</style>
<script type="text/javascript">
function fileStarter(x){
var file = x.files[0];
var size=file.size;
size=size/(1024*1024);
if(size<3.5){
var imageType = /image.*/;
var fileDisplayArea=document.getElementById("preview");
if (file.type.match(imageType)) {
var reader = new FileReader();
reader.onload = function(e) {
fileDisplayArea.innerHTML = "";
document.getElementById("err").innerHTML="";
document.getElementById("err").style["display"]="none";
var img = new Image();
img.src = reader.result;
img.setAttribute("title","Preview is Shown here");
img.setAttribute("width","100%");
img.setAttribute("height","100%");
fileDisplayArea.appendChild(img);
}
reader.readAsDataURL(file);
} else {
document.getElementById("err").innerHTML="Invalid File Type! Allowed files are .bmp, .gif, .jpg and .png only";
document.getElementById("err").style.display="block";
}
}
else {
document.getElementById("err").innerHTML="File is too large ! At max 3.5Mb is allowed!";
document.getElementById("err").style.display="block";
}
}
</script>
</head>
<body>
<br /><br /><center>
<h3 style='border-bottom:2px dashed #ff9933'> Please Do Upload Your Photo </h3>
<br />Currently Your Pic is:<br /><div id="preview" class="preview">
Preview Of Your Photo
</div>
<form action="UploadScript.php" method="post" enctype="multipart/form-data" Onsubmit="return upsub(this,event);">
<input type='file' id='profpic' name="profpic" onchange='fileStarter(this);'>
<br /><br />
<div class="invalid" id="err" style="display:none;"></div>
<input type="submit" name="submit" value="Upload My Pic">
</form>
</center>
</body>
</html>
Fiddle.
在该演示中，它允许您从设备中选择文件，一旦您选择/选择一个图像，它就会在您将其提交到服务器之前在预览框中显示其预览在你的问题中。
如果需要，它还将对文件大小和文件类型进行验证。
要使其可用于多个文件，我建议您首先使用<input type="file"> multiple属性，然后为每个文件动态追加<div id='preview'>并显示它＆＃39; S
使用<div>或for循环为每个使用while属性的文件预览附加的files.length。
希望它会帮助你。干杯：）!!
答案 1 :(得分：0)