Ⅰ 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
Ⅱ Div中插入圖片的方法有哪幾種
1、<img src=".../.../" alt=""/>這是直接放一張圖片
2、可以在div的css里設置背景圖片:background:.../.../;
Ⅲ 急！想要實現一個功能，就是上傳一張圖片顯示在一個div中
解決方法有兩種：
第一種，讓圖片和布局寬度高度成等比例，這樣CSS設置死寬度和高度，圖片也是等比例縮小，圖片也不會變形。
比如淘寶，要求店鋪主上傳產品封面圖片是正方形的，為什麼，因為圖片寶貝展示列表都是正方形的排版布局，這樣要求上傳合適正方形寶貝封面圖片，也是讓圖片不變形。
所以有條件的情況下，大家將首頁、圖片列表頁的布局寬度高度保持一致，上傳圖片時候將圖片先進行處理為布局寬度高度時等比例放大尺寸的。
第二種，使用CSS max-width和max-height實現圖片自動等比例縮小
很簡單我們要使用到max-width和max-height,這樣即可設置對象圖片最大寬度和最大高度，這樣圖片就會等比例縮放圖片，然圖片相對不變形清晰。
Ⅳ mvc視圖中怎麼上傳圖片並顯示
如果只是上傳的話那太容易了，如果還要顯示那就難了，因為要顯示的話就不能只向伺服器提交一次請求，必須非同步提交。下面的例子是我親自寫的，非同步提交上傳圖片並預覽。全部代碼都在。
返回到前台頁面的JSON格式對象是以類的對象。
publicclassReturnImage
{
publicstringbig{get;set;}
publicstringsmall{get;set;}
publicstringisSuccessfull{get;set;}
publicstringmessage{get;set;}
}
對於上傳和生成縮略圖，請自行完成，以下是ASP.NETMVC的例子。
publicclassHomeController:Controller
{
//
//GET:/Home/
publicActionResultIndex()
{
returnView();
}
///<summary>
///上傳圖片
///</summary>
///<returns></returns>
publicActionResultUploadImage()
{
//定義錯誤消息
JsonResultmsg=newJsonResult();
try
{
//接受上傳文件
HttpPostedFileBasepostFile=Request.Files["upImage"];
if(postFile!=null)
{
DateTimetime=DateTime.Now;
//獲取上傳目錄轉換為物理路徑
stringuploadPath=Server.MapPath("~/UploadFiles/"+time.Year+"/"+time.ToString("yyyyMMdd")+"/");
//文件名
stringfileName=time.ToString("yyyyMMddHHmmssfff");
//後綴名稱
stringfiletrype=System.IO.Path.GetExtension(postFile.FileName);
//獲取文件大小
longcontentLength=postFile.ContentLength;
//文件不能大於2M
if(contentLength<=1024*2048)
{
//如果不存在path目錄
if(!Directory.Exists(uploadPath))
{
//那麼就創建它
Directory.CreateDirectory(uploadPath);
}
//保存文件的物理路徑
stringsaveFile=uploadPath+fileName+"_big"+filetrype;
try
{
//保存文件
postFile.SaveAs(saveFile);
//保存縮略圖的物理路徑
stringsmall=uploadPath+fileName+"_small"+filetrype;
MakeThumbnail(saveFile,small,320,240,"W");
ReturnImageimage=newReturnImage();
image.big="/UploadFiles/"+time.Year+"/"+time.ToString("yyyyMMdd")+"/"+fileName+"_big"+filetrype;
image.small="/UploadFiles/"+time.Year+"/"+time.ToString("yyyyMMdd")+"/"+fileName+"_small"+filetrype;
msg=Json(image);
}
catch
{
msg=Json("上傳失敗");
}
}
else
{
msg=Json("文件大小超過限制要求");
}
}
else
{
msg=Json("請選擇文件");
}
}
catch(Exceptione)
{
;
}
msg.ContentType="text/html";
returnmsg;
}
///<summary>
由於回答超過最大限制，///生成縮略圖的代碼請向我索取
Ⅳ 求js或JQ代碼，實現圖片上傳後在指定的div中以背景圖顯示
如果是background的話使用 $("div").css("background-image","圖片地址")，如果使用的img的話使用$("div").attr("src","地址");關鍵就是獲取圖片地址給弄上去
Ⅵ 如何用html實現按鈕上傳圖片，並且圖片縮略圖顯示在按鈕上方
+分採納
<html>
<head>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
</style>
</head>
<body>
<div></div>
<input type="file" multiple="multiple" onchange="upload(event)">
</body>
</html>
<script type="text/javascript">
const [el,stage] = [
document.querySelector('input'),
document.querySelector('div'),
]
function upload({target}){
if(!target.files.length) return;
for(const file of target.files){
const img = new Image();
img.src = URL.createObjectURL(file);
stage.appendChild(img);
}
}
</script>