上传预览,图片展示大小的控制

在项目开发中需要先上传图片到文件服务器,然后在页面上进行展现,表示上传成功。

起初没有对图片做任何控制,只是增加一个img标签,将src设置为空,当图片上传成功后,通过JavaScript动态的将src设置为服务器上的文件地址。当使用小点图片进行上传时,显示没有任何问题,但是上传大的图片的时候,图片就会破坏div的布局。

为了控制图片的显示,起初就给img标签设置了固定的高度和宽度:height="300"
width=‘200‘。这时候图片虽然不会破坏页面的整体布局,但是显示效果会非常的不好,尤其是遇到那种图片长宽比例差别很大的,显示会非常的畸形。请教了小伙伴以后,将img的样式中height的值给删除,只保留width属性,图片的高就会等比例的去显示。虽然效果不错,但是对于小的图片,展示上会将图片拉伸,看起来仍然不是很好。

最后终于找到了合适的标签来控制图片的显示,那就是max-width最大宽度与min-width最小宽度。最小宽度(min-width)与最大宽度(max-width)用于设置图片最小最大宽度限制比较多,图片大小不定时候,让图片能有一个较统一的展示。下面是一个max-width的展示例子:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>max-width的使用</title>
</head>
<body>
<img src="http://images.china.cn/attachement/jpg/site1000/20130531/7427ea210a41131295c830.jpg" style="max-width:300px;" />
</body>
</html>

参考地址:http://www.divcss5.com/rumen/r423.shtml

时间: 2024-10-10 05:21:24

上传预览,图片展示大小的控制的相关文章

上传预览图片

//上传预览 function showFile(data){ var thisfile = $(data).children('input')[0]; contentLoaded(thisfile) } function ProcessFile(items) { var file = $(items).prop ('files')[0]; var img = $(items).parent().parent().prev()[0]; if ( file) { var reader = new

图片上传预览(包含大小压缩)

之前开发了一个图片上传的页面.但是由于主要是用于微信中,调用手机摄像头拍照,照片都是M为单位,太耗流量,于是进行修改. 原本采用的直接是上传文件的方式,现改为使用canvas进行绘图,传递照片base64字符串. 调整后的代码: 页面HTML: <input type="file" capture="camera" accept="image/*" name="img1" id="img1" styl

官方demo修改后的webuploader上传预览图片(兼容IE8) github下载回来的有问题

注意!!!!! 不要使用GitHub上下载回来的webuploader.js,下载回来的webuploader.js会报错  fn 未定义 方便的话去看百度官网的demo 浏览器将其抓包获取webuploader.js文件 <!DOCTYPE html> <html lang="zh-CN"> <head>     <meta charset="UTF-8">     <title>WebUploader演

JavaScript 图片上传预览效果

图片上传预览是一种在图片上传之前对图片进行本地预览的技术.使用户选择图片后能立即查看图片,而不需上传服务器,提高用户体验.但随着浏览器安全性的提高,要实现图片上传预览也越来越困难.不过群众的智慧是无限的,网上已经有很多变通或先进的方法来实现.例如ie7/ie8的滤镜预览法,firefox 3的getAsDataURL方法.但在opera.safari和chrome还是没有办法实现本地预览,只能通过后台来支持预览.在研究了各种预览方法后,作为总结,写了这个程序,跟大家一起分享.上次写的简便无刷新文

图片上传预览

例1: 1.先创建一个file表单域,我们需要用它来浏览本地文件. <form name="form1" id="form1" method="post" action="upload.php"> <input type="file" name="file1" id="file1" /> </form> 2.试下效果: 判断文件类型

js:s上次预览,上传图片预览,图片上传预览

<!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"> <head> <meta http-equiv="Content-

html,图片上传预览,input file获取文件等相关操作

input file常用方法: var obj=document.getElementById("upimage"); var file=obj.files[0];//获取文件数据 var path=obj.value;//获取文件当前路径 var size=obj.files[0].size;//获取文件大小 var prefix=path.substring( path.lastIndexOf('\\')+1 );//获取文件名的前缀名(文件格式) var suffix=path.

js前端实现多图图片上传预览

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试页面</title> <script type="text/javascript"> //下面用于

多图片上传预览功能

//下面用于多图片上传预览功能 function setImagePreviews(avalue) { var docObj = document.getElementById("doc"); var dd = document.getElementById("dd"); dd.innerHTML = ""; var fileList = docObj.files; for (var i = 0; i < fileList.length;

移动端 js 实现图片上传 预览

方法一: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试页面</title> <script type="text/javascript"> /