<code id="ymukc"><xmp id="ymukc">

圖片上傳后即時預覽

hussion的頭像 hussion 0 2016-04-14 10:21 12

 基本信息

× 1   

瀏覽數: 36069

分享時間: 2 年 前

24

[HTML]代碼    

 <!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		//設置圖片上傳后預覽的div樣式
		<style type="text/css">
			#preview, .img, img
			{
			width:200px;
			height:200px;
			}
			#preview
			{
			border:1px solid #000;
			}
		</style>
	</head>
	<body>
		<div id="preview"></div>
		<input type="file" onchange="preview(this)" />
		//圖片上傳和預覽
		<script type="text/javascript">
			function preview(file)
			{
			var prevDiv = document.getElementById('preview');
			if (file.files && file.files[0])
			{
			var reader = new FileReader();
			reader.onload = function(evt){
			prevDiv.innerHTML = '
			<img src="' + evt.target.result + '" />
			';
			}
			reader.readAsDataURL(file.files[0]);
			}
			else
			{
			prevDiv.innerHTML = '
			<div class="img"
				style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>
			';
			}
			}
		</script>
	</body>
</html>  
為此代碼點贊!
1 年 前 op_liu679
不錯的js 代碼
1 年 前 Ckc520
為此代碼點贊!
1 年 前 jzc_001

12 3 [下一頁]

  • tcxu的頭像 tcxu 2016-05-04 20:56 代碼數:0

    為此代碼點贊!

     

    建議

    1. 刪去 #preview, .img, img 中 對于高 height 的設置,即:

    #preview, .img, img {

    width:200px;

    }

    這樣,顯示出來的圖象,仍然保持原有的 寬/高 之比例。

        2. 刪去 <div > 的屬性:

    style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,

    即:

    var s = '<div class="img"';

    s+='src=\'' + file.value + '\'"></div>';

    prevDiv.innerHTML=s;

    這樣,仍然保持原有的功能。

    最后編輯 2 年 前

  • shanghe306的頭像 shanghe306 2016-10-08 12:30 代碼數:0

    不錯的js 代碼,二樓建議也不錯。

  • williams26的頭像 williams26 2016-12-23 16:25 代碼數:0

    好的,謝謝

  • cixexey的頭像 cixexey 2017-11-13 19:10 代碼數:0

    I found that site very usefull and this survey is very cirious, I ' ve never seen a blog that demand a survey for this actions, very curious...  new futura new futura new futura new futura new futura new futura new futura new futura new futura new futura

  • 素材火的頭像 素材火 2017-11-22 11:01 代碼數:0

    我收集了很多圖片上傳代碼,有興趣可以看看

    http://www.sucaihuo.com/js/101-0-0-0

  • ruida.deng的頭像 ruida.deng 2017-01-10 10:03 代碼數:0

  • cixexey的頭像 cixexey 2017-11-24 00:11 代碼數:0

    Great article with excellent idea!Thank you for such a valuable article. I really appreciate for this great information.. Contract Phone Deals

     
     
     
  • cixexey的頭像 cixexey 2017-11-25 02:23 代碼數:0

    This is a smart blog. I mean it. You have so much knowledge about this issue, and so much passion. You also know how to make people rally behind it, obviously from the responses.

    Things to do

  • 595809071的頭像 595809071 2017-12-12 12:19 代碼數:0

    不錯,效果很好,學習了

  • qianyu1024的頭像 qianyu1024 2017-02-03 09:42 代碼數:0

    不錯,效果很好,學習了

您的評論:

  
六合特码资料
<code id="ymukc"><xmp id="ymukc">
<code id="ymukc"><xmp id="ymukc">