Home > Article > Web Front-end > Detailed example of js simple upload image preview function

Detailed example of js simple upload image preview function

coldplay.xixiforward: 2020-06-13 17:28:472362browse

js simple upload image preview function - simple and rough

js simple upload image preview function

<!DOCTYPE html>
<html>
<head>
<title>js简单上传图片预览功能</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
</head>
<body>
<h3>请选择图片文件：JPG/GIF</h3>
<form name="form0" id="form0" >
    <input type="file" name="file0" id="file0" multiple="multiple" />
    <br>
    <img src="" id="img0" width="150" height="150" style="display:none;">
</form>
</body>
</html>
 
<script type="text/javascript">
$("#file0").change(function(){
    var objUrl = getObjectURL(this.files[0]) ;
    console.log("objUrl = "+objUrl) ;
    if (objUrl) {
        $("#img0").attr("src", objUrl) ;
        $("#img0").show();
    }
}) ;
//建立一個可存取到該file的url
function getObjectURL(file) {
    var url = null ;
    if (window.createObjectURL!=undefined) { // basic
        url = window.createObjectURL(file) ;
    } else if (window.URL!=undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file) ;
    } else if (window.webkitURL!=undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file) ;
    }
    return url ;
}
</script>

Recommended tutorial: " JS Basic Tutorial》

The above is the detailed content of Detailed example of js simple upload image preview function. For more information, please follow other related articles on the PHP Chinese website!

Statement：

This article is reproduced at:liqingbo.cn. If there is any infringement, please contact admin@php.cn delete

Previous article：Detailed explanation of JS generating random numbersNext article：Detailed explanation of JS generating random numbers

See more

Detailed example of js simple upload image preview function

Related articles