這篇文章主要介紹了HTML5實現簡單圖片上傳所遇到的問題及解決辦法的相關資料,需要的朋友可以參考下 一、展示
因為前端上傳文件是必須透過form表單的,不能使用ajax,這樣的話一個移動頁面放入一個type為file的input真心不怎麼好看,如下圖,很挫有沒有
複製程式碼
#程式碼如下:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <title></title> <style> p{width: 100%;} .logo img{display:block; margin:0 auto;} .upload{position: relative;width: 80px;height: 18px;line-height: 18px;background: #2fc7c9;text-align: center; color: #FFF;padding: 0px 5px;-webkit-border-radius: 2px;border-radius: 2px; margin: 0 auto; } .upload form{width:100%;position:absolute; left:0; top:0;opacity:0; filter:alpha(opacity=0);} .upload form input{width: 100%;} </style> </head> <body> <p class="logo"> <img src="/static/imghwm/default1.png" data-src="img/1.jpg" class="lazy" / alt="HTML5實作簡單圖片上傳所遇到的問題及解決方法" > </p> <p class="upload"> <p>上传图片</p> <form> <input type="file" /> </form> </p> </body> </html>
二、JS程式碼#我這邊寫的蠻簡單的,只是用了下h5上傳的的基本功能
html程式碼如下,action為要請求的路徑,我這邊做的是當文件改變時就上傳修改頭像,input標籤的name屬性不能省去,具體跟後端介面有關
複製程式碼##程式碼如下:
<form id="uploadForm" enctype="multipart/form-data" method="post" action="XXXXXX"> <input type="file" name="imageFile" id="imageFile" onchange="fileSelected()" /> </form> var iMaxFilesize = 2097152; //2M window.fileSelected = function() { var oFile = document.getElementById('imageFile').files[0]; //读取文件 var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i; if (!rFilter.test(oFile.type)) { alert("文件格式必须为图片"); return; } if (oFile.size > iMaxFilesize) { alert("图片大小不能超过2M"); return; } var vFD = new FormData(document.getElementById('uploadForm')), //建立请求和数据 oXHR = new XMLHttpRequest(); oXHR.addEventListener('load', function(resUpload) { //成功 }, false); oXHR.addEventListener('error', function() { //失败 }, false); oXHR.addEventListener('abort', function() { //上传中断 }, false); oXHR.open('POST', actionUrl); oXHR.send(vFD); };
以上內容跟大家分享了HTML5實作簡單圖片上傳所遇到的問題及解決辦法的相關知識,希望對大家有幫助。
相關推薦:
Html5實作二維碼掃描並解析#HTML5實作分享到微信好友朋友圈QQ好友QQ空間微博二維碼功能#
以上是HTML5實作簡單圖片上傳所遇到的問題及解決方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

在Bootstrap4中實現多項目輪播的解決方案在Bootstrap4中實現多項目輪播並不是一件簡單的事情。雖然Bootstrap...

如何實現鼠標滾動事件穿透效果?在我們瀏覽網頁時,經常會遇到一些特別的交互設計。比如在deepseek官網上,�...

無法直接通過CSS修改HTML視頻的默認播放控件樣式。 1.使用JavaScript創建自定義控件。 2.通過CSS美化這些控件。 3.考慮兼容性、用戶體驗和性能,使用庫如Video.js或Plyr可簡化過程。

在手機上使用原生select的潛在問題在開發移動端應用時,我們常常會遇到選擇框的需求。通常情況下,開發者傾...

在手機上使用原生select的弊端是什麼?在移動設備上開發應用時,選擇合適的UI組件是非常重要的。許多開發者�...

使用Three.js和Octree優化房間內第三人稱漫遊的碰撞處理在Three.js中使用Octree實現房間內的第三人稱漫遊並添加碰�...

使用原生select在手機上的問題在移動設備上開發應用時,我們經常會遇到需要用戶進行選擇的場景。雖然原生sel...

探究鼠標滾動事件的實現原理在瀏覽一些網站時,你可能注意到某些頁面元素在鼠標懸停時仍然允許滾動整個頁...


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

MantisBT
Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

EditPlus 中文破解版
體積小,語法高亮,不支援程式碼提示功能

SublimeText3 英文版
推薦:為Win版本,支援程式碼提示!

SublimeText3 Linux新版
SublimeText3 Linux最新版

記事本++7.3.1
好用且免費的程式碼編輯器