Close qq_31540195 's Blog
- catalog view
- Summary view
- Subscription
Async Books: September blockbuster book upgrade, classic
Programmer September Newsletter
Weekly recommendation: ES6, virtual reality, Internet of Things (review book delivery) HTML image upload view and click to enlargeTags: htmlhtml picture upload preview Motor room ah picture2016-08-12 10:02 661 People read comments (0) favorite reports Classification:HTML Learning (1)
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
In the project when the use of the image upload, with a bootstrap template found on the web, there is a better image upload preview function, but can not click to enlarge the picture, feel that the user experience is not good, so you want to add a click to enlarge the function of the picture , using a GitHub open source project viewer.js; address: https://github.com/fengyuanchen/viewer;
But in the development time found that the original loaded image can be enlarged, but for their own upload of the picture is not amplified, guess a bit may be because the bootstrap template is in the JS inside the code added an IMG to display the uploaded images, Viewer.js cannot find this img, so it can't be zoomed in after clicking. Because just started to contact this aspect, so the source code also did not understand how to read, do not know this conjecture is right;
In fact, for the project, upload the picture can not be clicked to enlarge is no influence, generally we do not need to enlarge the local some pictures, but for such a function I still want to do a bit to achieve, so in the spare part of the online various ways to find a piece of integration to do it out;
First prepare the studio to download jquery and viewer;
[HTML]View PlainCopy
- <! DOCTYPE HTML>
- <html>
- <head>
- <meta charset="UTF-8">
- <meta name= "author" content="Edielei" />
- <title></title>
- <link rel="stylesheet" type="text/css" href= "Zoom/viewer.css"/>
- <link rel="stylesheet" type="text/css" href="Zoom/main.css"/>
- <body>
- <h3>html5 image upload preview </h3>
- <div class="docs-pictures clearfix">
- <img id="pic" src="" style= "width:200px;height:200px;" />
- </div>
- <input id="img" type= "file" accept="image/*" />
- <script < span class= "attribute" >src= "js/jquery-1.11.1.min.js" type= "Text/javascript" Charset= "utf-8" ></ script>
- < Script src= "zoom/viewer.js" type= "Text/javascript" Charset= "utf-8" ></ script>
- <script src="zoom/main.js" type="Text/javascript" charset= "utf-8"> </Script>
- <script type="Text/javascript">
- $ (function () {
- $ (' #img '). Change (function () {
- var file = this.files[0];//select uploaded files
- var r = new FileReader ();
- R.readasdataurl (file); Base64
- $ (R). Load (function () {
- $ (' #pic '). attr (' src ', this.result);
- });
- });
- });
- </Script>
- </head>
- </Body>
- </html>
Before uploading:
After uploading:
After zooming in:
Here the effect is not obvious, this is because the original image is so large, you can manually click on the bottom button to adjust the picture, and in fact, we often show on the page is the thumbnail image, when the click to display the original is already enlarged If you need to click to get a larger picture than the original, then it is necessary to change the viewer.js inside the property,
The position is roughly changed to 533 lines:
[JavaScript]View PlainCopy
- Image = {
- Naturalwidth:naturalwidth,
- Naturalheight:naturalheight,
- Aspectratio:aspectratio,
- Ratio:width/naturalwidth,
- width:width*1.5,
- height:height*1.5,
- Left: (viewerwidth-width*1.5)/2,
- Top: (viewerheight-height*1.5)/2
- };
-
Top
-
0
-
Step
-
0
- Previous Android Development Settings app start-up (2)-and keep the app in the foreground in real time
- Next HTML Learning Note
Related articles recommended
- ? HTML image upload view and click to enlarge
- ? Python Full stack Engineer special training class--Wei Chi
- ? javaee:day8-online image upload and browse (with image click to enlarge, download, delete, directory break)
- ? Application practice of Blink in Ali group--Chen Shouan
- ? Click image to upload file
- ? vue2.x Knowledge Point
- ? HTML image upload and display
- ? Case analysis of large-scale web architecture design
- ? HTML5 multi-image upload preview effect
- ? Machine learning case Study-fraud detection
- ? HTML5 image upload
- ? Android Development 30 minutes integrated third-party SDK
- ? JQUERY+HTML5 image upload can be cropped
- ? HTML5 Multi-image upload
- ? HTML5 image Upload
- ? HTML5 Mobile clip image upload Avatar code
View Comments
No Comments
* The above user statements represent only their personal views and do not represent the views or positions of the CSDN website.
A single point of empathy
- Visit: 9,687 times
- Reward Points: 230
- Grade:
- Ranking: Miles away
- Original: 14 Articles
- Reprinted: 0 Articles
- Translation: 0 Articles
- Comments: 0
- Android Component Properties (0)
- Android verification features (0)
- Boostrap plug-in (1)
- Android Notes (7)
- HTML Learning (2)
- SSM Framework Learning Notes (1)
- Android Studio (0)
- Android Studio notes (2)
- Android Superexample Development (0)
- September 2017 (1)
- June 2017 (1)
- March 2017 (4)
- October 2016 (1)
- September 2016 (1)
Expand
- Bootstrap-table.js How to display different font colors depending on the cell data (6962)
- Android automatically pops up when activity loads Popwindow (896)
- HTML image upload view and click to enlarge (661)
- Struts2 2.5.2web.xml and STRUTS.XMLL configuration (237)
- Android Development Settings App boot up (2) – and keep the app real-time at the front desk (138)
- Android uses TextView to achieve the text of the Marquee effect (122)
- Android Development Settings App post-boot (108)
- Recyclerview Draw different split lines (105)
- HTML Learning Notes (88)
- Custom picture gesture Scaling ImageView notes (86)
- Implementation of the Android scrolling broadcast effect (0)
- Recyclerview Draw different split lines (0)
- Several issues with the introduction of module in Android Studio (0)
- Android uses TextView to achieve the text of the Marquee effect (0)
- Struts2 2.5.2web.xml and STRUTS.XMLL configuration (0)
- HTML Learning Notes (0)
- HTML image upload view and click to enlarge (0)
- Android Development Settings App boot up (2) – and keep the app real-time at the front desk (0)
- Android Development Settings App post-boot (0)
- Android automatically pops up when activity loads Popwindow (0)
- * CSDN New Blog Feed Flow Beta user Solicitation Order
- * Android Check update download install
- * Create the simplest recycleview slide menu in history
- * How TCP network communication solves the problem of packet sticking
- * SDCC 2017 Big Data technology on the real Front summit
- * Fast integration of one video live function
-
Company Profile | careers | Advertising SERVICES | contact | copyright | Legal Counsel | PROBLEM Report | partners | Forum Feedback
-
website Customer Service magazine customer Service Micro Blog service [email protected] 400-660-0108| Beijing Innovation Music Information Technology Co., Ltd. Copyright | Jiangsu knowledge for Computer Co., Ltd. | Jiangsu le know Network Technology Co., Ltd.
-
Beijing ICP certificate No. No. 09002463 | Copyright? 1999-2017, csdn.net, All rights Reserved
HTML image upload view and click to enlarge
