我在那儿。我想知道如何制作一个在左上角有一个容器或盒子的表单。
表单已完成上传，用户在文件上传框中选择照片（未提交）的那一刻，照片将出现在该照片容器/框上。
你能给我指导吗？谢谢
【问题讨论】：
标签： php jquery html image file-upload
当然可以。为此，您需要使用 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'> 动态附加到每个文件的正文并显示它
使用for 或while 循环在每个文件中使用files.length 属性在附加的<div> 中进行预览。
希望对您有所帮助。干杯:)！！
【讨论】：