File upload and display of uploaded files-JS Tutorial-php.cn

File upload and display of uploaded files

黄舟

Release： 2017-02-18 13:17:29

Original

1479 people have browsed it

1. Problem background

Use the file upload component file to upload the file and display the file (picture)

2. Implementation source code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>文件上传并展示文件路径</title>
        <script type="text/javascript" src="../js/jquery-1.12.3.js" ></script>
        <script>
            $(document).ready(function(){
                $("#fileUpload").off().on("change",function(){
                    var fileUpload = $(this).val();
                    var proUrl = window.location.protocol;
                    var pageUrl = window.location.host;
                    var path = proUrl + "//" +pageUrl + "/AngularJS/pages/";
                    $("#uploadImg").attr("src",path+fileUpload);
                    console.info(path+fileUpload);
                });
            });
        </script>
    </head>
    <body>
        <p>
            <input type="file" id="fileUpload" name="upload" /><br><br>
            <img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/624/853/757/1487394923328420.png"  class="lazy"  id="uploadImg"   style="max-width:90%" alt="File upload and display of uploaded files" >
        </p>
    </body>
</html>

Copy after login

3. Implementation result

File upload and display of uploaded files

The above is the file upload and display of the content of the uploaded file. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!