當前位置:首頁 » 文件管理 » html上傳圖片代碼

html上傳圖片代碼

發布時間: 2023-08-30 20:11:33

❶ 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,/NlyAAAD1klEQVRoQ+++d972/++T//++XRa2drCkDwG8E4B+A9BH8maZ2FrBkj4D8GYA+hHAKyT/thSRYiGnZtgJogeSgFNglYkgX/+/YOlgSf0AohTOkoBekj/B19KwBdcOz/++5mGm4WttHa3D892xJAspTwXX3Pae//+/+mIZ6GzAjt7iJ49RraWhf+gWnRXY0RaY2Frd/+/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 = 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頁面裡面製作一個上傳圖片的區域,就是點那個區域,就能上傳照片,這個html代碼應該怎麼寫

你好,html上傳文件的代碼如下:

<inputtype="file"name="fileUpload"/>
<inputtype="submit"value="上傳文件"/>

至於你要說的有個區域顯示圖片的,這個需要配合前端開發才可以,單純的html代碼是做不到的,謝謝。

❸ html表單怎麼上傳圖片

html表單這樣上傳圖片:

<!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/html; charset=utf-8" />

<title>上傳圖片</title>

</head>

❹ html5網頁背景圖手動上傳切換代碼怎麼寫

html5網頁背景圖手動上傳切換代碼這樣寫。
1、html5網頁背景圖手動棗含上傳切換代碼需要在網頁上點擊滑鼠右鍵查看網站源代碼。
2、找到css裡面的背景圖這一段代碼,查看背絕伏景凳宏笑圖路徑,通過ftp或者伺服器進行替換圖片即可。

熱點內容
request獲得伺服器ip 發布:2025-02-28 09:57:56 瀏覽:821
c讀取資料庫中圖片 發布:2025-02-28 09:52:50 瀏覽:650
愛豆里的視頻怎麼緩存 發布:2025-02-28 09:33:47 瀏覽:858
境外伺服器和虛擬ip 發布:2025-02-28 09:31:33 瀏覽:655
液晶電視存儲器 發布:2025-02-28 09:23:50 瀏覽:920
學習linux先學什麼 發布:2025-02-28 09:22:16 瀏覽:347
在cmd輸什麼可以查電腦配置 發布:2025-02-28 09:08:25 瀏覽:309
搭建共享文件存儲空間 發布:2025-02-28 09:03:48 瀏覽:825
android線程handler 發布:2025-02-28 09:03:44 瀏覽:408
短鏈接生成源碼 發布:2025-02-28 08:56:43 瀏覽:775