HTML5에서 간단한 이미지 업로드를 구현할 때 발생하는 문제와 해결 방법-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

HTML5에서 간단한 이미지 업로드를 구현할 때 발생하는 문제와 해결 방법

不言

May 08, 2018 pm 03:58 PM

h5 html5 업로드

본 글은 HTML5에서 간단한 이미지 업로드를 구현할 때 발생하는 문제점과 해결방안에 대한 내용을 주로 소개하고 있으니, 필요하신 분들은 참고하시면 됩니다. 1. Display
프론트엔드 업로드 파일은 폼폼을 거쳐야 하기 때문에, ajax를 사용할 수 없습니다. 이 경우 아래와 같이 모바일 페이지에 입력하는 것이 좋지 않습니다. PC에서 해결 방법을 찾은 사람들이 있습니까? uploadify와 같은 jquery 도구 라이브러리를 사용하면 플래시로 이러한 입력을 수행할 수 있지만 모바일 측의 대부분의 브라우저는 플래시를 지원하지 않습니다. 그래서 마지막 방법은 form form을 사용하는 것인데, form의 투명도를 설정하고 0으로 입력하면 표시되는 내용과 표시되는 내용이 동시에 p에 들어가 표시되는 내용이 다음과 같이 보이도록 할 수 있습니다. 당신이 원하는. 코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

<!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="img/1.jpg" /> 
</p> 
<p class="upload"> 
<p>上传图片</p> 
<form> 
<input type="file" /> 
</form> 
</p> 
</body> 
</html>

로그인 후 복사

위 그림과 같아 "이미지 업로드"의 p 태그에 표시됩니다. .클릭하면 파일을 선택하는 효과가 있습니다

2.JS 코드

여기서 작성한 내용은 아주 간단하며, h5 업로드의 기본 기능을 사용했습니다

html 코드는 다음과 같습니다. 여기서 하는 일은 파일이 변경될 때 아바타를 업로드하고 수정할 때 입력 태그의 이름 속성을 생략할 수 없습니다. 특히 백엔드 인터페이스와 관련된 코드는 다음과 같습니다. 문제와 해결책에 대한 관련 지식이 있다면 모든 분들께 도움이 되기를 바랍니다.

관련 권장 사항:
Html5는 QR 코드 스캐닝 및 구문 분석을 구현합니다.

HTML5는 WeChat 친구에게 공유를 구현합니다. 서클 QQ 친구 QQ 공간 Weibo QR 코드 기능

위 내용은 HTML5에서 간단한 이미지 업로드를 구현할 때 발생하는 문제와 해결 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.