html图片上传代码（html上传照片代码）

本篇文章给大家谈谈html图片上传代码，以及html上传照片代码对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、html图片怎么上传
• 2、html实现图片上传
• 3、求html多文件上传代码 可参考以下代码
• 4、html 表单上传图片
• 5、在html页面里面制作一个上传图片的区域，就是点那个区域，就能上传照片，这个html代码应该怎么写？

html图片怎么上传

给你个示例代码：

%@ page contentType="text/html;charset=GBK"%

html

head

titleLogin/title

/head

body

form action="login_check.jsp" method="post"

B----欢迎来到XXXXXX页面----/Bbr

pre

用户名：input type="text" value="" name="userName"br

密码 ：input type="password" value="" name="pwd"br

input type="submit" value="登入"

input type="reset" value="取消"

/pre

img src=;

/form

/body

/html

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控件中标注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 表单上传图片

使用表单中的文件域（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代码应该怎么写？

你好，html上传文件的代码如下：

 input type="file" name="fileUpload" /

 input type="submit" value="上传文件" /

至于你要说的有个区域显示图片的，这个需要配合前端开发才可以，单纯的html代码是做不到的，谢谢。

html图片上传代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于html上传照片代码、html图片上传代码的信息别忘了在本站进行查找喔。