html网页上传图片代码(html上传照片代码)
admin 发布:2022-12-19 15:40 140
今天给各位分享html网页上传图片代码的知识,其中也会对html上传照片代码进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!
本文目录一览:
- 1、在html页面里面制作一个上传图片的区域,就是点那个区域,就能上传照片,这个html代码应该怎么写?
- 2、求html多文件上传代码 可参考以下代码
- 3、html实现图片上传
- 4、html 表单上传图片
- 5、html表单怎么上传图片?
- 6、html网页上传文件的完整代码
在html页面里面制作一个上传图片的区域,就是点那个区域,就能上传照片,这个html代码应该怎么写?
你好,html上传文件的代码如下:
input type="file" name="fileUpload" /
input type="submit" value="上传文件" /
至于你要说的有个区域显示图片的,这个需要配合前端开发才可以,单纯的html代码是做不到的,谢谢。
求html多文件上传代码 可参考以下代码
从技术角度看,你只需要在input控件中标注multiple标签就够了
以下就是演示代码:
!DOCTYPE html
html
head
title
Solution 4-5: Sending multiple files
/title
/head
body
form id="myForm"
fieldset
legendSolution 4-5: Sending multiple files/legend
labelUpload one or more files:/label
input type="file" name="multipleFileUpload" multiple /
/fieldset
/form
/body
/html
重要心得
用户选择的多个文件传递到服务端后将会被服务端的编程语言去处理的。有些编程语言,比如PHP需要你为name标签的字符添加方括号来支持传输多个文件。
1input name="filesUploaded[]" type="file" multiple /
这样,PHP将构造一个数据类型的数组,来容纳一个个上传到服务器的文件。相反如果你在HTML标签中不适用方括号的话,PHP将仅仅只接受到最后一个文件。
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/png;base64,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-Picitemimg {
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 olli {
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 = 0; i filelist; i++) {
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 = 0; i piclist.length; i++) {
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
html 表单上传图片
使用表单中的文件域(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属性表示点击“浏览...”按钮时,弹出的打开对话框中的文件类型。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" " /TR/xhtml1/DTD/xhtml1-transitional.dtd"
html xmlns=" "
head
meta http-equiv="Content-Type" content="text/html; charset=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
html表单怎么上传图片?
html表单这样上传图片:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " /TR/xhtml1/DTD/xhtml1-transitional.dtd"
html xmlns=" "
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title上传图片/title
/head
一、html在表单元素中这样添加背景图
用户名:input type="text" name="user" style="background: url(图片路径)" /br/
密 码: input type="password" name="mima" style="background: url(图片路径)" /br/
input type="submit" value="确定" style="background: url(图片路径)" /
input type="reset" value="取消" style="background: url(图片路径)" /
html网页上传文件的完整代码
html前端代码:
html
body
form action="upload-file.php" method="post"
enctype="multipart/form-data"
label for="file"文件名:/label
input type="file" name="file" id="file" /
br/
input type="submit" name="submit" value="提交" /
/form
/body
/html
如果是ubuntu上部署apache2,你应该是php开发者吧,action="upload-file.php
" 中的upload-file.php改为你自己的后端php接收文件的逻辑代码即可!
这里提供upload-file.php后端接收文件的代码:
?php
if ($_FILES["file"]["error"] 0)
{
echo "错误: " . $_FILES["file"]["error"] . "br /";
}
else
{
echo "文件名: " . $_FILES["file"]["name"] . "br /";
echo "类型: " . $_FILES["file"]["type"] . "br /";
echo "大小: " . ($_FILES["file"]["size"] / 1024) . " Kbbr /";
}
if (file_exists("upload/" . $_FILES["file"]["name"]))
{
echo $_FILES["file"]["name"] . " 文件已经存在. ";
}
else
{
move_uploaded_file($_FILES["file"]["tmp_name"],
"upload/" . $_FILES["file"]["name"]);
echo "文件已经被存储到: " . "upload/" . $_FILES["file"]["name"];
}
?
代码很简单,我相信你应该能看懂,这里的 文件夹 upload/ 需要你自己手动创建,请确保文件路径正取!
我也是web开发者,有问题可继续追问我!或是加我工作室QQ(540144097),在群里向我提问!有问必答,望采纳......
html网页上传图片代码的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于html上传照片代码、html网页上传图片代码的信息别忘了在本站进行查找喔。
版权说明:如非注明,本站文章均为 AH站长 原创,转载请注明出处和附带本文链接;
相关推荐
- 05-19如何做网站,如何做网站网页
- 05-18免费网页设计制作网站,免费网页设计软件
- 05-18制作网页一般多少钱,网页制作要多少钱
- 05-18企业网站模板,企业网站模板图片
- 05-17长沙网站制作公司哪家好,长沙网页制作公司
- 05-17免费建网页,怎样免费建立网站
- 05-17做公司网页,做公司网页有什么简单的方法
- 05-17百度网页推广,百度网页推广费用
- 05-16百度知道网页版地址,百度知道的网址
- 05-15北京网站建设制作公司,北京网站制作网页
取消回复欢迎 你 发表评论:
- 标签列表
- 最近发表
- 友情链接