图片解析

此工具可以选择一个图片文件,并获取该文件信息、显示BLOB原始数据

  • 提供: 林晓州
  • 版本: V1.1
  • 发布: 2017.06.13,图片预览及url数据显示,V1.0
  • 更新: 2017.06.14,优化显示效果,V1.1

选择一个图片来预览



参考代码


<html>
 <head></head>
 <body>
  <div class="card"> 
   <div class="card-block"> 
    <h4>选择一个图片来预览</h4> 
	
    <div class="row"> 
     <div class="col-md-12">
      <input onchange="previewImage(this)" type="file" name="kkadmin_movie_poster" id="kkadmin_movie_poster" class="form-control" />
      <br />
     </div>
	 
     <div class="col-md-8">
      <div id="kkadmin_movie_poster_img_area"></div>
      <br />
     </div>
	 
     <div class="col-md-4">
      <div id="kkadmin_movie_poster_fileinfo"></div>
      <br />
     </div>
	 
     <div class="col-md-12">
      <div id="kkadmin_movie_poster_blob"></div>
      <br /> 
     </div>
    </div>
	
   </div>
  </div>

 </body>
</html>

<script>
	function previewImage(file)
	{
		if(!file.files.length) {
			$("#kkadmin_movie_poster_preview").html(Default_PosterArea)
			return
		}

		if (file.files && file.files[0]) {
			var reader = new FileReader();
			reader.readAsDataURL(file.files[0]);
			reader.onload = function(evt) {
				var filename = file.files[0].name;
				var filesize = file.files[0].size;
				var filetype = file.files[0].type;
				var filedate = file.files[0].lastModifiedDate;

				// 验证文件格式
				if("image/png"!=filetype && "image/jpg"!=filetype && "image/jpeg"!=filetype) {
					KKAdmin_Msgbox.show("不支持的文件类型("+filetype+")!", 3, {icon:"error", showfunc:"fade"})
					$("#kkadmin_movie_poster_preview").html(Default_PosterArea)
					return
				}

				// 图片预览
				$("#kkadmin_movie_poster_img_area").html('<h3>图片预览</h3><img id="kkadmin_movie_poster_img" draggable=false>');
				$("#kkadmin_movie_poster_img").css("width", "100%");
				var img = document.getElementById('kkadmin_movie_poster_img');
				img.src = evt.target.result;
				img.onload = function() {
					// 加载后的处理
				}

				// 文件信息
				$("#kkadmin_movie_poster_fileinfo").before("<h3>图片数据</h3>")
				var fileinfo_css = "<p class='text-center'>"+filename+""
				+ "<br>"+OL_Public_ConvertFileSize(filesize)+" | "+filetype+"</p>";
				$("#kkadmin_movie_poster_fileinfo").html(fileinfo_css);
				$("#kkadmin_movie_poster_fileinfo").css("border", "1px #eee solid");
				$("#kkadmin_movie_poster_fileinfo").css("padding", "5px");

				// 图片数据
				$("#kkadmin_movie_poster_blob").after("<h3>图片数据</h3><div style='border:1px #eee solid; padding:10px; word-wrap:break-word; max-height:300px; overflow-y:auto;'>"+evt.target.result+"/<div>");
			}
		}
		else //兼容IE
		{
			var div = document.getElementById('kkadmin_movie_poster_preview');
			var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
			file.select();
			var src = document.selection.createRange().text;
			div.innerHTML = '<img id=imghead>';
			var img = document.getElementById('imghead');
			img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
			div.innerHTML = "<div id=divhead style='width:100%;"+sFilter+src+"\"'></div>";
		}
	}

	function OL_Public_ConvertFileSize(size) {
		if(!size) {
			return size
		}
		var fileSize = 0;
		if (size > 1024 * 1024)
			fileSize = (Math.round(size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
		else
			fileSize = (Math.round(size * 100 / 1024) / 100).toString() + 'KB';

		return fileSize;
	}
</script>





制作: 林晓州 | 网站: OneLib智库