简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)
Home > Web Front-end > JS Tutorial > body text

jQuery+HTML5实现图片上传前预览效果_jquery

WBOY
Release： 2016-05-16 15:43:53
Original
1860 people have browsed it

本文实例讲述了jQuery+HTML5实现图片上传前预览效果。分享给大家供大家参考。具体如下：

这里主要是使用HTML5 的File API,建立一個可存取到该file的url，一个空的img标签，ID为img0,把选择的文件显示在img标签中，实现图片预览功能。请选择支持HTML API的浏览器，比如谷歌Chrome和火狐等。

运行效果如下图所示：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-html5-pic-upload-pre-view-codes/

具体代码如下：




HTML5上传图片预览





请选择图片文件：JPG/GIF





jQuery+HTML5实现图片上传前预览效果_jquery
Copy after login

希望本文所述对大家的jquery程序设计有所帮助。

Related labels：
html5 jquery upload picture Preview
source：php.cn
Previous article：jQuery网页版打砖块小游戏源码分享_jquery Next article：js实现鼠标点击文本框自动选中内容的方法_javascript技巧
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Steps to install jQuery in Nuxt.js Although I try to add jQuery in my project, I get an error saying it's not defined. plugin...
From 2023-11-06 16:41:50
0
1
225
jQuery getting wrong value when getting data attribute I have a div with data attribute <divclass='p1'data-location='1'></div> I have...
From 2023-11-01 23:01:19
0
1
209
Support jQuery's Transfer-Encoding:chunked I'm a web developer. In my script I use header() to set "Transfer-Encoding:chunked&qu...
From 2023-10-25 23:44:37
0
1
230
How to get the natural dimensions of an image using JavaScript or jQuery? So far I have this code: varimg=document.getElementById('draggable'); varwidth=img.clientW...
From 2023-10-21 13:53:08
0
2
275
Automatically expand text area I'm trying to make a simple auto-expanding text area. This is my code: textarea.onkeyup=fu...
From 2023-10-21 08:49:23
0
2
225
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！