<input type="submit" value="上传文件" />
至于你要说的有个区域显示图片的，这个需要配合前端开发才可以，单纯的html代码是做不到的，谢谢。
html：
<section class="upload-section">
<article class="upload-piclist">
<div class="upload-file">
<input type="file" id="file" accept="image/*" multiple onchange="imgChange()"/>
</div>
</article>
</section>
css:
/* body {
margin: 0
padding: 0
max-width: 414px
margin: 0 auto
} */
.upload-fh {
background-image: url('data:image/pngbase64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAD1klEQVRoQ+XbTYhWVRgH8P8fwZUguFKi2pShbvqg2lhhG0PJlc40zQg62WhDg+jklIo1wViUNgwVTGSWWMngyvCjVdLHLrHaJaOBIIK2DHL7lweegcvL48D7vveee7xztu+d972/Ofec8zznPJe4T5qkRQC2AVgP4A8AMySvt3v7bPcP6rhe0lIAJwFsKvz+CZLb272f7MGSHnDsiy24WZKPNQosyUDWs88EsEGS3zQGLOkpx64OUG+T/LhdrF2f5SMt6QXHPhSghklOd4LNEixpo2OXBaitJL/rFJsdWFKvYxe3oO4A6Cd5phtsVmBJrwH4KgD9C+BVkj91i80GLGk3gKkA9I9jfy8DmwVY0kEAEwHoL8f+XRa2drCkDwG8E4B+A9BH8maZ2FrBkj4D8GYA+hHAKyT/KxtbG1iSRUiWCLS2045VFdjkYEm23HwPYHMAOk5yR1XQue9NFmlJskDCsC8FqCmSe6rGJuthSRYiGnZtgJogeSgFNglYkgX/hn08QI2RPJIKWzlYkqV1hn0kQL1B8ouU2ErBkixhN+zyADVA0j5L3iqZtCTZVoyBlrSILAmwNfZscqn/YOlgSf0AohTOkoBekj/XhS39kZa0E0A0Li0JMOzlOrGlgiWNAjgagCwJ6CF5tW5saWBJ7wEYD0CWBBj2Vg7YUsCSbB19KwBdcOz/uWC7BkuyzbRdAchOBfpygs7dS8eztKRvAQwEqGMkh3LEdtzDkj4CMBagJkna5JVt66iHJUX56jjJ97OVdhN4SLJtGdueaW3N7GFTLqgxPNetC2qWLqDtUGtf8Hif93CyOetwAf0ugGjC+tXRzYm0Cui9AD4JevpPRzcnli6gXwfwZYC+5mGm4WttHa3D892xJAspTwXX3Pae/qVOcelgX7JednS042F58bm60JWAHb3Ot3lWBDg7N5qpA10Z2NFPO/rRADdE8lhqdKVgR69y9BMBbpTkZEp05WBHP+jo5wJc0qQjCdjRdrZkOfSGAJ0s6UgGdrSdHhq6J0An2ThICi4EKMcBDAZom7mtgKUZ58NFoCQrYrFiltZmSYehm1MBUOjpwwAOBGhLOgzdnBqPAno/gA8CtMXdhr5S5rJVyxhuBUgaAfBpALOkw9CXykJnAfYZ3Iq9vw5glnQY+mIZ6GzAjt7iJ49RraWhf+gWnRXY0RaY2Frd/GrawkT2vFfVPhz0aLPqpQvoJx29JkA3qyK+gF7p6GcD9AjJz9sd09mN4WDJutdbLTdIRq8IzPs/yB7sE9nCeW+p8Hjbm2nDAKwcahbAdGPfTGt3nM53/V00ckNMKWY8LAAAAABJRU5ErkJggg==')
background-repeat: no-repeat
background-size: 100% 100%
height: 30px
width: 30px
}
.upload-hedaer {
height: 55px
display: grid
grid-template-columns: repeat(3, 1fr)
padding: 0 10px
box-sizing: border-box
align-items: center
text-align: center
background: #287cff
color: #fff
border-bottom: 1px solid #efefef
font-size: 19px
}
.upload-hedaer div:last-child {
text-align: right
}
.upload-textarea {
width: 100%
height: 60px
font-size: 28px
border: 1px solid #efefee
max-height: 300px
}
.upload-article-text {
width: 100%
padding: 10px
box-sizing: border-box
}
.upload-file {
position: relative
background: url('../images/z_add.png') no-repeat 50%/100% 100%
/* width: 100px*/
height: 120px
order: 9
}
.upload-piclist {
padding: 0 10px
box-sizing: border-box
display: grid
grid-template-columns: repeat(3, 120px)
justify-content: space-between
grid-gap: 14px
}
#file {
width: 100%
height: 100%
opacity: 0
}
.upload-Picitem {
width: 100%
height: 120px
}
.upload-Picitem>img {
width: 100%
height: 100%
object-fit: cover
}
.submit {
padding: 15px 0
background-color: #287cff
color: #fff
text-align: center
margin: 10px
font-size: 20px
border-radius: 10px
}
.upload-sm {
padding: 10px
box-sizing: border-box
color: gray
}
.upload-sm ol>li {
margin-bottom: 10px
}
js:let picmax = 9//限制上传数量
function imgChange() {
let file = document.getElementById('file').files
let imglist = document.querySelectorAll('.upload-Picitem')
let piclist = document.getElementsByClassName('upload-piclist')[0]
let filelist = file.length + imglist.length >picmax ? 9 - imglist.length : file.length + imglist.length
if (file.length + imglist.length >= 9) {
let uploadfile = document.getElementsByClassName('upload-file')[0]
uploadfile.style.display = "none"
}
for (let i = 0i <filelisti++) {
readerfile(file[i]).then(e =>{
let html = document.createElement('div')
html.className = 'upload-Picitem'
html.innerHTML = '<img src=' + e + ' alt="pic">'
piclist.appendChild(html)
})
}
}
function readerfile(file) {
return new Promise((resolve, reject) =>{
let reader = new FileReader()
reader.addEventListener("load", function() {
resolve(reader.result)
}, false)
if (file) {
reader.readAsDataURL(file)
}
})
}
//提交
function submit() {
let imglist = []
let text = document.getElementsByClassName('upload-textarea')[0].value
let piclist = document.querySelectorAll('.upload-Picitem')
for (let i = 0i <piclist.lengthi++) {
imglist.push(piclist[i].lastChild.src)
}
console.log("发布内容：", text)
console.log("图片列表：", imglist)
}
//textarea高度自适应
var autoTextarea = function(elem, extra, maxHeight) {
extra = extra || 0
var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,
isOpera = !!window.opera &&!!window.opera.toString().indexOf('Opera'),
addEvent = function(type, callback) {
elem.addEventListener ?
elem.addEventListener(type, callback, false) :
elem.attachEvent('on' + type, callback)
},
getStyle = elem.currentStyle ? function(name) {
var val = elem.currentStyle[name]
if (name === 'height' &&val.search(/px/i) !== 1) {
var rect = elem.getBoundingClientRect()
return rect.bottom - rect.top -
parseFloat(getStyle('paddingTop')) -
parseFloat(getStyle('paddingBottom')) + 'px'
}
return val
} : function(name) {
return getComputedStyle(elem, null)[name]
},
minHeight = parseFloat(getStyle('height'))
elem.style.resize = 'none'
var change = function() {
var scrollTop, height,
padding = 0,
style = elem.style
if (elem._length === elem.value.length) return
elem._length = elem.value.length
if (!isFirefox &&!isOpera) {
padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'))
}
scrollTop = document.body.scrollTop || document.documentElement.scrollTop
elem.style.height = minHeight + 'px'
if (elem.scrollHeight >minHeight) {
if (maxHeight &&elem.scrollHeight >maxHeight) {
height = maxHeight - padding
style.overflowY = 'auto'
} else {
height = elem.scrollHeight - padding
style.overflowY = 'hidden'
}
style.height = height + extra + 'px'
scrollTop += parseInt(style.height) - elem.currHeight
document.body.scrollTop = scrollTop
document.documentElement.scrollTop = scrollTop
elem.currHeight = parseInt(style.height)
}
}
// addEvent('propertychange', change)
// addEvent('input', change)
// addEvent('focus', change)
change()
}
pic:z_add.png
使用表单中的文件域（<input type="file".../>）控件可以上传文件。
打开DreamWeaver，这里使用的版本是CS6，新建一个php文件。
保存到网站目录下，命名为upload.php。
在代码中插入一个表单
对话框中， *** 作留空，方法选择“post”，编码类型输入“multipart/form-data”，名称命名为“upload_form”，其中编码类型必须为“multipart/form-data”。点击确定，产生的代码如下：
<body>
<form action="" method="post" enctype="multipart/form-data" name="upload_form"></form>
</body>
接下来在form中插入一个标签控件、一个文件域控件和一个上传按钮。
结果如下：
<body>
<form action="" method="post" enctype="multipart/form-data" name="upload_form">
<label>选择图片文件</label>
<input name="imgfile" type="file" accept="image/gif, image/jpeg"/>
<input name="upload" type="submit" value="上传" />
</form>
</body>
不同的浏览器，对于文件域控件的显示不同，IE9浏览器和FireFox中的预览效果都要看一下
代码中，重要的是名为imgfile的文件域控件，type属性为“file”，表示这是一个文件域控件。
accept属性表示点击“浏览...”按钮时，d出的打开对话框中的文件类型。accept="image/gif, image/jpeg"表示我们只想在文件打开对话框中显示后缀名为“gif”和“jpg”、“jpeg”的文件。对于此属性，有些浏览器并不支持。比如在IE9中，此属性不起任何作用。在chrome中，此属性起作用。
如果想支持所有的图像文件，accept值可以设置为“image/*”，在chrome中，文件类型显示
好了，html代码就写完了，因为action=""，表示点击上传按钮时，将表单提交给自身，因此，我们还要添加接收表单的处理代码。
代码如下：
<?php
if (isset($_FILES['imgfile'])
&&is_uploaded_file($_FILES['imgfile']['tmp_name']))
{
$imgFile = $_FILES['imgfile']
$imgFileName = $imgFile['name']
$imgType = $imgFile['type']
$imgSize = $imgFile['size']
$imgTmpFile = $imgFile['tmp_name']
move_uploaded_file($imgTmpFile, 'upfile/'.$imgFileName)
$validType = false
$upRes = $imgFile['error']
if ($upRes == 0)
{
if ($imgType == 'image/jpeg'
|| $imgType == 'image/png'
|| $imgType == 'image/gif')
{
$validType = true
}
if ($validType)
{
$strPrompt = sprintf("文件%s上传成功<br>"
. "文件大小: %s字节<br>"
. "<img src='upfile/%s'>"
, $imgFileName, $imgSize, $imgFileName
)
echo $strPrompt
}
}
}
?>
代码分析：
$_FILES是一个数组变量，用于保存上传后的文件信息。
$_FILES['imgfile']表示文件域名称为'imgfile'的控件提交服务器后，上传的文件的信息。
一个上传的文件，有以下属性信息：
'name'： 上传的文件在客户端的名称。
'type'： 文件的 MIME 类型，例如"image/jpeg"。
'size'： 已上传文件的大小，单位为字节。
'tmp_name'：上传时，在服务器端，会把上传的文件保存到一个临时文件夹中，可以通过此属性得到临时文件名。
'error'：文件在上传过程中的错误代码。如果上传成功，此值为0，其它值的意义如下：
1：超过了php.ini中设置的上传文件大小。
2：超过了MAX_FILE_SIZE选项指定的文件大小。
3：文件只有部分被上传。
4：文件未被上传。
5：上传文件大小为0。
代码中首先判断$_FILES['imgfile']变量是否存在，如果存在，并且$_FILES['imgfile']['tmp_name']变量所指文件被上传了，判断error属性，如果属性为0，把上传后的图像从临时文件夹移到upfile文件夹中，显示上传文件的信息，并显示上传后的图像。
如果error值不为0，表示上传失败，显示失败信息。
完成的代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.mobiletrain.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.mobiletrain.org ">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>上传图片文件</title>
</head>
<?php
if (isset($_FILES['imgfile'])
&&is_uploaded_file($_FILES['imgfile']['tmp_name']))
{
$imgFile = $_FILES['imgfile']
$upErr = $imgFile['error']
if ($upErr == 0)
{
$imgType = $imgFile['type']//文件类型。
/* 判断文件类型，这个例子里仅支持jpg和gif类型的图片文件。*/
if ($imgType == 'image/jpeg'
|| $imgType == 'image/gif')
{
$imgFileName = $imgFile['name']
$imgSize = $imgFile['size']
$imgTmpFile = $imgFile['tmp_name']
/* 将文件从临时文件夹移到上传文件夹中。*/
move_uploaded_file($imgTmpFile, 'upfile/'.$imgFileName)
/*显示上传后的文件的信息。*/
$strPrompt = sprintf("文件%s上传成功<br>"
. "文件大小: %s字节<br>"
. "<img src='upfile/%s'>"
, $imgFileName, $imgSize, $imgFileName
)
echo $strPrompt
}
else
{
echo "请选择jpg或gif文件，不支持其它类型的文件。"
}
}
else
{
echo "文件上传失败。<br>"
switch ($upErr)
{
case 1:
echo "超过了php.ini中设置的上传文件大小。"
break
case 2:
echo "超过了MAX_FILE_SIZE选项指定的文件大小。"
break
case 3:
echo "文件只有部分被上传。"
break
case 4:
echo "文件未被上传。"
break
case 5:
echo "上传文件大小为0"
break
}
}
}
else
{
/*显示表单。*/
?>
<body>
<form action="" method="post" enctype="multipart/form-data" name="upload_form">
<label>选择图片文件</label>
<input name="imgfile" type="file" accept="image/gif, image/jpeg"/>
<input name="upload" type="submit" value="上传" />
</form>
</body>
<?php
}
?>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）