Detailed example of js simple upload image preview function-JS Tutorial-php.cn

Detailed example of js simple upload image preview function

coldplay.xixi

Release： 2020-06-13 17:28:47

forward

2340 people have browsed it

Detailed example of js simple upload image preview function

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>

Copy after login

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!