首页
技术博客
PHP教程
数据库技术
前端开发
HTML5
Nginx
php论坛
新用户注册
|
会员登录
PHP教程
技术博客
编程问答
PNG素材
编程语言
前端技术
Android
PHP教程
HTML5教程
数据库
Linux技术
Nginx技术
PHP安全
WebSerer
职场攻略
JavaScript
开放平台
业界资讯
大话程序猿
登录
极速注册
取消
热门标签 | HotTags
solr
heap
case
emoji
scala
command
replace
expression
utf-8
text
chat
nodejs
window
process
golang
select
hook
cSharp
cpython
md5
cPlusPlus
match
blob
future
jar
express
join
hashtable
string
range
format
merge
heatmap
erlang
uri
export
config
javascript
settings
js
regex
io
usb
typescript
split
install
spring
include
default
stream
search
instance
foreach
triggers
python3
filter
copy
schema
数组
get
dagger
hash
go
httpclient
lua
hashcode
request
dll
tree
header
char
integer
loops
bit
vba
web
bytecode
int
timestamp
当前位置:
开发笔记
>
编程语言
> 正文
上传图片前的预览
作者:帅宁 | 来源:互联网 | 2023-09-14 12:21
点击浏览后自动在页面显示预览效果。自己试着写了下。关键是利用file对象的onchange事件,并且要判断上传的格式。<!DOCTYPEhtmlPUBLIC"-W3CDT
点击浏览后自动在页面显示预览效果。自己试着写了下。
关键是利用file对象的onchange事件,并且要判断上传的格式。
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<
html
xmlns
="http://www.w3.org/1999/xhtml"
xml:lang
="en"
lang
="en"
>
<
head
>
<
title
>
title
>
head
>
<
body
>
<
script
type
="text/Javascript"
>
function
previewPic(){
img
=
document.getElementById(
"
f
"
);
if
(img){
imgext
=
img.value.substring(img.value.indexOf('.'),img.value.length);
imgext
=
imgext.toLowerCase();
if
(imgext
!=
'.bmp'
&&
imgext
!=
'.jpg'
&&
imgext
!=
'.jpeg'
&&
imgext
!=
'gif'){
img.value
=
'';
alert('格式不对!');
return
false
;
}
document.getElementById(
"
previewImg
"
).innerHTML
=
"
"
+
img.value
+
"
'
;
}
}
script
>
<
input
type
="file"
name
="f"
id
="f"
onchange
="previewPic()"
/>
<
div
id
="previewImg"
>
div
>
body
>
html
>
html
xml
function
input
上传
图片
io
http
ip
写下你的评论吧 !
吐个槽吧,看都看了
会员登录
|
用户注册
推荐阅读
string
手机移动端HTML5和JavaScript如何实现视频上传和压缩视频质量?
本文讨论了在手机移动端如何使用HTML5和JavaScript实现视频上传并压缩视频质量,或者降低手机摄像头拍摄质量的问题。作者指出HTML5和JavaScript无法直接压缩视频,只能通过将视频传送到服务器端由后端进行压缩。对于控制相机拍摄质量,只有使用JAVA编写Android客户端才能实现压缩。此外,作者还解释了在交作业时使用zip格式压缩包导致CSS文件和图片音乐丢失的原因,并提供了解决方法。最后,作者还介绍了一个用于处理图片的类,可以实现图片剪裁处理和生成缩略图的功能。 ...
[详细]
蜡笔小新 2023-12-12 15:58:44
md5
Java工具类库Hutool介绍及功能概述
本文介绍了Java工具类库Hutool,该工具包封装了对文件、流、加密解密、转码、正则、线程、XML等JDK方法的封装,并提供了各种Util工具类。同时,还介绍了Hutool的组件,包括动态代理、布隆过滤、缓存、定时任务等功能。该工具包可以简化Java代码,提高开发效率。 ...
[详细]
蜡笔小新 2023-12-14 14:29:36
md5
Nginx使用(server参数配置)
本文介绍了Nginx的使用,重点讲解了server参数配置,包括端口号、主机名、根目录等内容。同时,还介绍了Nginx的反向代理功能。 ...
[详细]
蜡笔小新 2023-12-14 17:08:34
md5
AJAX的POST请求及实现数据修改功能的方法
本文介绍了使用AJAX的POST请求实现数据修改功能的方法。通过ajax-post技术,可以实现在输入某个id后,通过ajax技术调用post.jsp修改具有该id记录的姓名的值。文章还提到了AJAX的概念和作用,以及使用async参数和open()方法的注意事项。同时强调了不推荐使用async=false的情况,并解释了JavaScript等待服务器响应的机制。 ...
[详细]
蜡笔小新 2023-12-14 16:12:01
match
android listview OnItemClickListener失效原因
最近在做listview时发现OnItemClickListener失效的问题,经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效,还会导致单击后listview每个item的背景改变,使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况,并提供了解决方法。 ...
[详细]
蜡笔小新 2023-12-14 14:25:50
string
Android开发笔记:使用Picasso加载网络图片等比例缩放
在Android开发中,使用Picasso库可以实现对网络图片的等比例缩放。本文介绍了使用Picasso库进行图片缩放的方法,并提供了具体的代码实现。通过获取图片的宽高,计算目标宽度和高度,并创建新图实现等比例缩放。 ...
[详细]
蜡笔小新 2023-12-14 17:34:00
hook
VScode格式化文档换行或不换行的设置方法
本文介绍了在VScode中设置格式化文档换行或不换行的方法,包括使用插件和修改settings.json文件的内容。详细步骤为:找到settings.json文件,将其中的代码替换为指定的代码。 ...
[详细]
蜡笔小新 2023-12-14 17:15:38
blob
基于layUI的图片上传前预览功能的2种实现方式
本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ...
[详细]
蜡笔小新 2023-12-14 17:06:58
blob
高校天文共享平台开发过程中的思考与规划
本文介绍了高校天文共享平台的开发过程中的思考和规划。该平台旨在为高校学生提供天象预报、科普知识、观测活动、图片分享等功能。文章分析了项目的技术栈选择、网站前端布局、业务流程、数据库结构等方面,并总结了项目存在的问题,如前后端未分离、代码混乱等。作者表示希望通过记录和规划,能够理清思路,进一步完善该平台。 ...
[详细]
蜡笔小新 2023-12-13 18:08:58
process
【MicroServices】【Arduino】装修甲醛检测,ArduinoDart甲醛、PM2.5、温湿度、光照传感器等,数据记录于SD卡,Python数据显示,UI5前台,微服务后台……
这篇文章介绍了一个基于Arduino的装修甲醛检测项目,使用了ArduinoDart甲醛、PM2.5、温湿度、光照传感器等硬件,并将数据记录于SD卡,使用Python进行数据显示,使用UI5进行前台设计,使用微服务进行后台开发。该项目还在不断更新中,有兴趣的可以关注作者的博客和GitHub。 ...
[详细]
蜡笔小新 2023-12-13 15:03:06
express
MySQL表分区的创建、增加和删除方法详解
本文详细介绍了MySQL表分区的创建、增加和删除方法,包括查看分区数据量和全库数据量的方法。欢迎大家阅读并给予点评。 ...
[详细]
蜡笔小新 2023-12-13 12:26:11
match
Android开发实现的计时器功能示例
本文分享了Android开发实现的计时器功能示例,包括效果图、布局和按钮的使用。通过使用Chronometer控件,可以实现计时器功能。该示例适用于Android平台,供开发者参考。 ...
[详细]
蜡笔小新 2023-12-12 22:51:19
text
在Xamarin XAML语言中如何在页面级别构建ControlTemplate控件模板
本文介绍了在Xamarin XAML语言中如何在页面级别构建ControlTemplate控件模板的方法和步骤,包括将ResourceDictionary添加到页面中以及在ResourceDictionary中实现模板的构建。通过本文的阅读,读者可以了解到在Xamarin XAML语言中构建控件模板的具体操作步骤和语法形式。 ...
[详细]
蜡笔小新 2023-12-12 17:52:50
range
使用cacti监控mssql 2005运行资源情况的操作步骤
本文介绍了使用cacti监控mssql 2005运行资源情况的操作步骤,包括安装必要的工具和驱动,测试mssql的连接,配置监控脚本等。通过php连接mssql来获取SQL 2005性能计算器的值,实现对mssql的监控。详细的操作步骤和代码请参考附件。 ...
[详细]
蜡笔小新 2023-12-12 13:57:58
case
如何在codeigniter中识别angularjs请求
本文讨论了如何在codeigniter中识别来自angularjs的请求,并提供了两种方法的代码示例。作者尝试了$this->input->is_ajax_request()和自定义函数is_ajax(),但都没有成功。最后,作者展示了一个ajax请求的示例代码。 ...
[详细]
蜡笔小新 2023-12-12 12:37:07
帅宁
这个家伙很懒,什么也没留下!
Tags | 热门标签
solr
heap
case
emoji
scala
command
replace
expression
utf-8
text
chat
nodejs
window
process
golang
select
hook
cSharp
cpython
md5
cPlusPlus
match
blob
future
jar
express
join
hashtable
string
range
RankList | 热门文章
1
各种MOUSE鼠标形状的表示方法_HTML/Xhtml_网页制作
2
iis最大连接数和队列长度 - jerrylsxu
3
亿级Web系统的高容错性实践 - Linux就该这么学
4
web开发中遇见的困难 - 倾不要留恋
5
css中bug记录 - wdyang
6
何为BFC - 霸气侧漏小红花
7
HTTP初步注解 - Yitoem
8
get和post的区别 - 霸气侧漏小红花
9
post和get的区别 - 强桓瑞
10
table表格中的内容溢出布局方式
11
如何才能做出传播量10万+的HTML5传播页面?大量转发的HTML5都有哪些共同特点?-
12
移动端 web 开发的内测环境如何配置?-
13
如何用最简洁形象的语言解释什么是HTTP协议中的头域(header)?-
14
相同码率下,Ogg、MPEG 4、WebM这三种视频格式,哪种清晰度更高,为什么?-
15
HTML5实现WebSocket协议原理浅析_html5教程技巧-
PHP1.CN | 中国最专业的PHP中文社区 |
DevBox开发工具箱
|
json解析格式化
|
PHP资讯
|
PHP教程
|
数据库技术
|
服务器技术
|
前端开发技术
|
PHP框架
|
开发工具
|
在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved |
京公网安备 11010802041100号
|
京ICP备19059560号-4
| PHP1.CN 第一PHP社区 版权所有