input echo delete upload pictures

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<body>
<!--accept可以控制选择的文件类型-->
<input type="file" hidden multiple accept="image/*">
<button>点击上传图片</button>
<div></div>
</body>
</html>
<script>
   $('button').click(function () {
       $('input').the Click () //(E) {function'input'). Change (
   $ (   })manually input click calling, can be arbitrarily defined the UI//
Can be obtained by the change event to the selected file    
       @ a: obtaining a first address of the echo 
       // if desired Echo form can be created manually or img tag by concatenating the string 
       for ( var I = 0; I < e.target.files.length; I ++ ) {// if necessary to verify the size of the file type, e.target.files [i] may be printed on the key determines which logically
            var img_url = window.URL. createObjectURL (e.target.files [I]) // can be obtained by this method to a file path, it can be used to image echoing 
           the console.log (img_url) // BLOB: HTTP: // localhost: 8080 / C433-557d2808 dbe13222a572-aa87--4c2c 
           var HTML = '<IMG the src = "' + img_url + '" width = "100px" height = "100px" />' ; 
           $ ( 'div' ) .append (HTML) 
       } 
       //The need to add and delete function, click on the corresponding icon to delete, get its index, to delete the corresponding tag img 

       @ II: base64 turn into second echo 
       for (the let I = 0; I <e.target.files. length; I ++ ) {
            var Reader = new new the FileReader ();
            var File = e.target.files [I] 
           reader.readAsDataURL (File); // transcoding 
           reader.onload = function (EL) { // here can Get into circulation base64 encoding switch (asynchronous) 
               var HTML = '<IMG the src = "' + el.target.result + '" width = "100px" height = "100px" />' ; 
               $ ( 'div' ) .append(html)
           }
       }


   })
</script>
input echo delete upload pictures

Guess you like
