Home >Web Front-end >JS Tutorial >Advanced JavaScript (8) JS implements image preview and import server functions

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

黄舟Original: 2017-03-23 16:13:521805browse

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:

a157802887b29e664ad48f0d150e75a7
Only display the specified file type when browsing

## f9d34b4a4e21a56647dcbede296216640c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188aaccept attribute list0c6dc11e160d3b678d68754cc175188a 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="padding-top: 15px">
<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

Previous article：Advanced JavaScript (7) The difference between JS interception string substr and substring methodsNext article：Advanced JavaScript (7) The difference between JS interception string substr and substring methods

See more

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

JS implements the file import function

Related articles