上传图片前的预览

xiaoxiao2021-02-28  65

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!doctype html> <html> <head> <script> function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#img_prev') .attr('src', e.target.result) .width(150) .height(200); }; reader.readAsDataURL(input.files[0]); } } </script> <meta charset=utf-8 /> <title>JS Bin</title> <style> article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; } </style> <script src="../../static/js/jquery-1.7.2.min.js"></script> </head> <body> <hr /> <form action="http://localhost:8080/file/upload" method="post" enctype="multipart/form-data"> 选择文件:<input type="file" name="file" οnchange="readURL(this)" width="120px"/> <img id="img_prev" src="#" alt="your image" /> 姓名:<input type="text" name="name" width="120px"> 性别:<input type="text" name="sex" width="120px"> <input type="submit" value="上传"> </form> <hr> <form action="http://localhost:8080/file/down" method="get"> <input type="submit" value="下载"> </form> </body> <script> </script> </html>
转载请注明原文地址: https://www.6miu.com/read-69782.html

最新回复(0)