- <!DOCTYPE html>
- <html>
- <head>
- <meta charset=
- "utf-8"
- >
- <title>html5 图片上传预览</title>
- <style>
- #preview {
- width: 300px;
- height: 300px;
- overflow: hidden;
- }
- #preview img {
- width: 100%;
- height: 100%;
- }
- </style>
- <script src=
- "../jquery/jquery-1.8.3.js"
- ></script>
- <script type=
- "text/javascript"
- >
- function
- preview1(file) {
- var
- img =
- new
- Image(), url = img.src = URL.createObjectURL(file)
- var
- $img = $(img)
- img.onload =
- function
- () {
- URL.revokeObjectURL(url)
- $(
- ‘#preview‘
- ).empty().append($img)
- }
- }
- function
- preview2(file) {
- var
- reader =
- new
- FileReader()
- reader.onload =
- function
- (e) {
- var
- $img = $(
- ‘<img>‘
- ).attr(
- "src"
- , e.target.result)
- $(
- ‘#preview‘
- ).empty().append($img)
- }
- reader.readAsDataURL(file)
- }
- $(
- function
- () {
- $(
- ‘[type=file]‘
- ).change(
- function
- (e) {
- var
- file = e.target.files[0]
- preview1(file)
- })
- })
- </script>
- </head>
- <body>
- <form enctype=
- "multipart/form-data"
- action=
- ""
- method=
- "post"
- >
- <input type=
- "file"
- name=
- "imageUpload"
- />
- <div id=
- "preview"
- style=
- "width: 300px;height:300px;border:1px solid gray;"
- ></div>
- </form>
- </body>
- </html>
来源: http://www.bubuko.com/infodetail-2284560.html