JS Tutorial

Advanced JavaScript (8) JS implements image preview and import server functions

黄舟

Mar 23, 2017 pm 04:13 PM

JS implements the file import function

During the project development process, the file upload function needs to be implemented. Take this opportunity to learn it.

This feature can be supported using the existing input type "file" in HTML. As shown below:

Only display the specified file type when browsing

##

accept attribute list
1.accept= "application/msexcel"

2.accept="application/msword"

3.accept="application/pdf"

4.accept="application/poscript"

5.accept="application/rtf"

6.accept="application/x-zip-compressed"

7.accept="audio/basic"

8.accept="audio/x-aiff"

9.accept="audio/x-mpeg"

10.accept="audio/x-pn/ realaudio"

11.accept="audio/x-waw"

12.accept="image/gif"

13.accept="image/jpeg"

14.accept="image/tiff"

15.accept="image/x-ms-bmp"

16.accept="image/x-photo- cd"

17.accept="image/x-png"

18.accept="image/x-portablebitmap"

19.accept="image/x -portable-greymap"

20.accept="image/x-portable-pixmap"

21.accept="image/x-rgb"

22.accept ="text/html"

23.accept="text/plain"

24.accept="video/quicktime"

25.accept="video/x -mpeg2"

26.accept="video/x-msvideo"

The following question is: how to obtain the upload path of the file, and then perform subsequent operations of reading and writing the file.

The following is a Demo for image upload and preview:

<!doctype html> 
<html> 
<head> 
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> 
<title>Image preview example</title> 
<script type="text/javascript"> 
var loadImageFile = (function () { 
if (window.FileReader) { 
var oPreviewImg = null, oFReader = new window.FileReader(), 
rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\
/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\
/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i; 
 
oFReader.onload = function (oFREvent) { 
if (!oPreviewImg) { 
var newPreview = document.getElementById("imagePreview"); 
oPreviewImg = new Image(); 
oPreviewImg.style.width = (newPreview.offsetWidth).toString() + "px"; 
oPreviewImg.style.height = (newPreview.offsetHeight).toString() + "px"; 
newPreview.appendChild(oPreviewImg); 
} 
oPreviewImg.src = oFREvent.target.result; 
arr = oPreviewImg.src.toString().split(",");
alert(arr[0]);
alert(arr[1]);
}; 
 
return function () { 
var aFiles = document.getElementById("imageInput").files; 
if (aFiles.length === 0) { return; } 
if (!rFilter.test(aFiles[0].type)) { alert("You must select a valid image file!"); return; } 
oFReader.readAsDataURL(aFiles[0]); 
} 
} 
if (navigator.appName === "Microsoft Internet Explorer") { 
return function () { 
alert(document.getElementById("imageInput").value); 
document.getElementById("imagePreview").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("imageInput").value; 
} 
} 
})(); 
</script> 
<style type="text/css"> 
#imagePreview { 
width: 160px; 
height: 120px; 
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); 
} 
</style> 
</head> 
<body> 
<p id="imagePreview"> 
</p> 
<form name="uploadForm"> 
<p> 
<input id="imageInput" type="file" name="myPhoto" onchange="loadImageFile();" /><br /> 
<input type="submit" value="Send" /></p> 
</form> 
</body> 
</html>

Test

If you pass the test, you can get the file format and encoding method And the encoding content, as shown below:

Comprehension

By reading the code, you can get the format and encoding method of the picture. The next step is to transfer the files.

After two days of humiliation, unwillingness, and painful struggle, I finally stood up tenaciously.

I returned to the dormitory at night and continued to struggle, and slowly my thoughts became clear: after getting the Base64 encoding format of the picture, I thought of the file transfer code I had written before. Of course, I wrote some Basic file operations. From this, I imagine that it should be possible to use the most primitive file transfer method here.

I arrived at the laboratory in the morning and first tried to transmit the Base64 encoding of the image to the server. After the server received the Base64 encoding transmitted from the client, it used the Base64Img toolkit (click to download the toolkit) to convert the Base64 Convert the image encoding to image format and save it to the specified location. In the first try, there is no problem saving the image file locally. After changing some minor details, the program was deployed on the Alibaba Cloud server. After testing, SUCCESS!

Core Code

html

<p   style="max-width:90%">
<label for="pic">更新广告图片 :</label>
<!-- <a class="btn btn-warning btn-sm" id="choice" ng-click="doChoice()" style="font-size:14px; 
color:red; font-family:微软雅黑; border-radius: 9px;">选择文件</a> -->
<input id="imageInput" type="file" accept="image/jpeg" 	    	onchange="loadImageFile();" />
<i id="img" hidden="hidden"></i>
<i id="imgName" hidden="hidden"></i>
</p>

javaScript

arr = oPreviewImg.src.toString().split(",");
document.getElementById("img").innerHTML = arr[1];
document.getElementById("imgName").innerHTML = 	  	document.getElementById("imageInput").files[0].name;
//alert(document.getElementById("img").innerHTML);
//alert(document.getElementById("imageInput").files[0].name);// 获取   	图片名称(PS:瞬间感觉自己好聪明啊~~)
//alert(arr[0]);// 获取图片格式与编码方式
//alert(arr[1]);// 获取图片Base 64编码字节

Program screenshot

Advertising information is displayed at the top of the client:

Server-side advertising management interface:

Server-side modification advertising information interface:

Conclusion

At this point, my file upload operation has finally been completed, and the journey has been bumpy and sad.

I also tried to use the ng plug-in ng-file-upload (see reference 1), but it ended in failure. I really didn’t understand the code. Writing it after the source code had no effect, and the layout was wrong. I was also ashamed.

The next problem I have to break through is paging. I often don’t realize the knowledge I have just come into contact with.

The above is the content of JavaScript Advanced (8) JS to implement image preview and import server functions. For more related content, please pay attention to the PHP Chinese website (www.php .cn)!

Use HTML5 to easily implement image preview

Detailed explanation of html5 image upload supports image preview compression and progress display. Compatible with IE6 and Standard browser

javascript implements image preview and upload (compatible with IE) code sharing

Statement

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

如何在uniapp中实现图片预览功能Jul 04, 2023 am 10:36 AM

如何在uni-app中实现图片预览功能引言：在移动应用开发中，图片预览是一项常用的功能。在uni-app中，我们可以通过使用uni-ui插件或自定义组件来实现图片预览功能。本文将介绍如何在uni-app中实现图片预览功能，并附带代码示例。一、使用uni-ui插件实现图片预览功能uni-ui是由DCloud开发的一套基于Vue.js的组件库，提供了丰富的UI组

Vue组件中如何处理图片预览和缩放问题Oct 09, 2023 pm 09:34 PM

Vue组件中如何处理图片预览和缩放问题，需要具体代码示例引言：在现代的Web应用程序中，图片预览和缩放是非常常见的需求。Vue作为一种流行的前端框架，为我们提供了许多强大的工具来处理这些问题。本文将介绍如何在Vue组件中处理图片预览和缩放，并提供具体的代码示例。一、图片预览：图片预览是指在用户点击或悬停在图片上时，能够展示出图片的大版本或者在特定区域放大显示

uniapp中如何实现图片浏览和图片预览功能Oct 20, 2023 pm 03:57 PM

uniapp中如何实现图片浏览和图片预览功能？在uniapp中，我们可以使用uni-ui组件库来实现图片浏览和图片预览功能。uni-ui是由DCloud公司开发的一套基于Vue.js的组件库，提供了丰富的UI组件，包括图片浏览和图片预览组件。首先，我们需要在项目中引入uni-ui组件库。打开项目的pages.json文件，在"easycom"字段中添加"un

Vue 中实现图片预览功能的技巧以及最佳实践Jun 25, 2023 pm 09:21 PM

Vue是一种流行的JavaScript框架，用于构建单页面应用程序(SPA)。在Web应用程序中，图片预览是一个常见的功能，Vue中有许多实现图片预览的方法。本文将详细介绍Vue中实现图片预览功能的技巧以及最佳实践。一、使用Vue插件Vue插件提供了一种简单的方法来实现图片预览。Vue插件可以全局注册，因此可以在整个应用程序中使用。这里介绍两个常用的Vue插

使用uniapp实现图片预览功能Nov 21, 2023 pm 02:33 PM

使用uniapp实现图片预览功能在现代社交媒体和手机应用中，图片的预览功能几乎是标配。在uniapp中，我们可以很容易地实现图片的预览功能，并提供用户良好的体验。本文将介绍如何使用uniapp来实现图片预览功能，并提供具体的代码示例。导入所需的插件为了实现图片预览功能，我们需要使用uniapp提供的uni.previewImage插件。在uniapp项目中，

如何在uniapp中使用图片预览插件实现图片放大查看功能Oct 20, 2023 am 08:16 AM

如何在uniapp中使用图片预览插件实现图片放大查看功能，需要具体代码示例随着移动设备的普及，图片在我们的日常生活中扮演着越来越重要的角色。而在开发移动端应用时，如何实现图片放大查看功能成为了一个常见需求。使用uniapp框架可以更快速地实现这样的功能，并且兼容多个平台。在uniapp中，可以使用第三方插件来实现图片放大查看功能，其中比较常用的插件是uni-

如何在Vue中实现图片预览功能Nov 07, 2023 am 10:27 AM

在现今的网页设计中，图片轮播是一个非常常见的效果。在使用Vue框架来开发网页时，我们可以通过Vue的插件来实现这一功能。本文将提供具体的代码示例，介绍如何在Vue中实现图片预览功能。一、引入插件我们可以使用Vue插件vue-awesome-swiper来实现图片轮播功能。Vue-awesome-swiper是轮播图组件，支持无限循环轮播、动态添加删除轮播项、

微信小程序实现图片预览功能Nov 21, 2023 pm 12:38 PM

微信小程序是一种轻量级的应用程序，可以在微信中直接使用，具有跨平台、操作方便等优点。在开发过程中，经常会遇到需要实现图片预览功能的需求。本文即将给出一个具体的代码示例，教你如何在微信小程序中实现图片预览功能。首先，我们需要在微信小程序的页面中引入组件。在wxml文件中添加以下代码：<imagesrc="{{imageUrl}}"

See all articles