js获取上传文件信息并及时查看

<form id="picForm" name="picForm"  method="post" enctype="multipart/form-data">

  <input type="file" id="photosfile" name="files" />

  <button class="btn">请选择上传图片</button>

 </form>

<script type="text/javascript">

    document.all.photosfile['files'];

</script>

 

console.log(document.all.photosfile['files'][0]);

 

 

 

//及时查看图片效果

html：

    <div id="show_img"><img src="__IMAGES__/head_img/user.png"></div>

     <input id="file_upload" name="file_upload" type="file" multiple="true">

js：

$("#file_upload").on("change",function(){

  var fileTag = document.getElementById("file_upload").files[0];

  if (fileTag) {

   var reader = new FileReader();

            reader.readAsDataURL(fileTag);

            $("#show_img").find("img").remove();

            reader.onload = function (e) {

                var urlData = this.result;

                document.getElementById("show_img").innerHTML += "<img src='" + urlData + "' alt='" + fileTag.name + "'/>";

            };

        }else{

            return;

        }

  return false;

 })

 

转载于:https://www.cnblogs.com/dong-blog/p/5824301.html