When uploading an image, preview it on the page

Front page:

<div class="container">
        <form class="form-horizontal" enctype="multipart/form-data" method="post" action="">      
            <div class="form-group">
                   <label for="inputUser" class="col-md-2 control-label">照片</label>
                     <div class="col-md-3">
                           <input type="file" name="multipartFile" class="form-control" id="inputUser" >
                           <img src="" id="img" style="width: 100px; height: 150px;">
                     </div>
              </div>
        </form>
 </div>

js code:
$(function(){
     $("[name='multipartFile']").change(function(){
        // this.files[0] represents the first selected file resource, because multiple="multiple" is written above, which means that there may be more than one uploaded file
        // , but only the first one is read here
        var objUrl = getObjectURL(this.files[0]) ;
        if (objUrl) {
            // Modify the address property of the image here
            $("#img").attr("src", objUrl) ;
        }
     }) ;
      // getObjectURL is a custom function
     function getObjectURL(file) {
        var url = null;
        // The effect of the following functions is the same, but different js functions need to be executed for different browsers
        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 ;
    }
});


Guess you like

Origin http://10.200.1.11:23101/article/api/json?id=326677960&siteId=291194637