javascript - 将选中的图像渲染到指定的图像容器

Question

下面是我的代码片段，我想做的是将选定的图像(从输入文件)渲染到指定的图像容器(“#test_image”)，但不幸的是，它看起来像错过了，遗憾的是没有工作.有什么想法吗？

var prev_image;
$(document).ready(function(){
  $("input[type='file']").change(function(){
    //get the val of the previous image for the reset use later
    prev_image = $("#test_image").attr("src");
    //render the selected image on the image box (test_image)
    $("#test_image").attr("src", $(this).val());
   })
});

#test_image{
 width: 100px;
  height: 100px;
-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="test_image" src="data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxITEhUSExAUFBIVFBYZGBMTEQ8QEBYXFBcXGBUUGBQYHSghGBolHBUUITEiJykrLi4uGB8zODMsNygtLisBCgoKDg0OGxAQGzQkHyQsLCwsLCwsLDUsLCwsLCwsLCwsLCwrLCwsLCwsLDUsLCwrLCssLDQsLCwsLCwsLCwsK//AABEIAOEA4QMBIgACEQEDEQH/xAAbAAEBAAMBAQEAAAAAAAAAAAAABgMEBQIBB//EAD0QAAIBAQUDCQYDCAMBAAAAAAABAgMEBREhMUFRYQYSMnGBkaGx0RMiQlLB8DNy4SNTYnOCkqLCJEPxsv/EABkBAQEBAQEBAAAAAAAAAAAAAAADAgEEBf/EAB0RAQEBAAMBAQEBAAAAAAAAAAABAhEhMRIDEzL/2gAMAwEAAhEDEQA/AP0IAHz3gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADDaLVCHSlhw1fcBmBx698/JHtl6I0qtvqS1m11ZeRzkUrMbrR+aP8AciVk8dXj15nwcuKtVo/PH+5HtMkT7F4aZdWQ5FcCZpW+pHSb7c/M3aF8v449scvBjl12QYLPa4T6Ms92j7jOdAAAAAAAAAAAAAAAAAAAAAAPFWrGKxk8EYrba401i829Ftf6E9abTKbxk+pbF1AbtrvaTyh7q3/E/Q5re82bDYJ1XhBdcnlFdbKe77ip085Lny3vorqidmbXZm1M2S7atToweHzP3Y971OvZ+TD+OphwisfF+hSApPzjcxHKpcn6C1Tl1yf0M6uigv8Aqj24vzZvA18xriNF3RQ/dR8V9TBV5P0HpFx6pP6nVA+YcROWjkx8lTskvqvQ5FruyrT6UHh8y96PetC6Bm/nGbiPzpM6NkvWUcp+8t/xL1KC8LjpVM0uZPfHR9cSYt931KTwmstklnF9pO5sYubFBRrRksYvFfepkJWz2iUHjF4eT6yhsVsjUWWTWq+9hxxsgAAAAAAAAAAAAAAAGvbbUqccXrsW9mapNRTbeCSxZM2y0upJyemxbkB4rVXJuUni394HSua53V96WKp+MuC4cT5cd1+1lzpfhxef8T+VfUsIxSSSWCWiWSRrGOe61nPPdeaNKMIqMUlFbEewCyoAAAAAAAAAAB4q0lJOMkmnqnoewBI3zczpe/DF0+9x6+HE5VKo4tSTwaP0JrHJrFbnmiRv26vZPnxX7N/4vd1Ed447iWs8dxv2G1qpHH4lqvvYbJLWW0OElJdq3rcU1GqpRUlozLL2AAAAAAAAAAAB4r1VGLk9EsfRd4HJvu05qmtmcuvYjRsFkdWagtur3Jaswzm223q22+0q+TVi5lPnte9Pwjs79e47mc13M5rq2ejGEVGKwSWRkALrAAAAnOUF7yUnSpvDDpSWuL2LccOnbKkXiqksfzNmLuSsXci/BzbkvH20Hj04vB4aPczpGpeWpeQA599Xh7GGKznJ4Rx04ti3h23h0AQNW21JPF1JY/ma7ktDs3BfEnJUqj5yfRk+knub2ozNy1iblUoANth4rUlOLjJYxawaPYAg7xsbpVHB9j3p6M2rltWEuY9Hp1nc5R2Ln0+cl70MX/T8S+vYSEXhmtSGpxUdTiq4GKy1ufFS3rx2mU44AAAAAAAAHMv2rhGMfmePZH9fI6ZwL8qY1Wvlil9X4tga9hs/tKkYb2sera+7EvYrBYLREvyTo41JT+WKXbL9EypKfnOlMToABRsAAEJev41X+ZLzZqm1ev41X+ZLzZqnmvqF9d/kj0qn5V5lMTPJHpVPyrzKYtjxXHgTfK/Wn1S/1KQm+V+tPql/qd3/AJN+J42Lu/Fp/nj5o1zPd/4tP88fNEJ6lF8AD0rgAA+NEJeVm9nVnDYnl1PNeDLwmOVtDCUJ700+zTzMfpOmNzphuGrlKG7NduTOsTt01MKseOK71l44FESTAAAAAAAAEiXts8ak3vnLzyKql0l1rzI/HHMUVXJSnhSk/mn5JL1O2cvk2v2EeuXmdQtnxbPgADToAAIS9fxqv8yXmzVKDlBdMnJ1YRck+lFLFp78Npw6dnnJ4KEm9yi8Tz6llQs7dvkj0qn5V5lMcy4rudGD53Tlm+CWiOmWzOIrmcQJvlfrT6pf6lIc6+7v9tDBdOLxXHehqcw1OYizYu/8Wn+ePmjxVs04vCUJJ7nF/bOzcF0y56qTi4qOaTWDb2PDYiMl5Sk7U4APQuAAAcblVTxop/LNPvTX1R2Tm8oV/wAefZ5o5rxzXiPoSwlF7mvMqyRxK2Oh54g+gA66AAAAAPVLpLrXmR7WGW4rkyYt8ObVmt05eeQoquTb/YR65eZ1Dick6mNKUd0/Nf8Ap2y2fFs+AB8k8Fi8ktpp19BOW3lK1LCnGLivilzs+pJrA7N2W1Vqamlhng1ua/8AUZmpXJqVtDEA06AAAAAAAAA1bytipU3NrHRJb29DiWTlLLnftIx5j2xUk1xzbxM3Ujl1IpQeYTTSaeKejWjPRp0Obyif/Hn/AE//AEjpHG5VVMKKXzTXck36HNeOa8SaRWxJazRxnFb5LzKo88RAAdAAAAAAOFf9PCrj80Yy+j8Ud059+0saaltg8OyX6+YHjkpXwqSh80fGP6NlUQFjrunOM18Mk+zau7EvoSTSa0axXaU/O9KYvQ3hm9CTvy+PaPmQeFNav5v0KW8KLnSnBayi0iKhYKrlzFTlzscM00lxb3Ddvhu3xrFvcdGEaSUJKSebkt71y2aJEjb7HKlNwlrsa0a3oWG3TpPGD6084vrRjN+b2xm8Veg5Ngv6nPKXuS49F9T9TrItLKrLyAA66AAAAcq337Sp5RfPluj0V1yOWyOW8Ni+KMJUpKclFa857GtOvd2kOzZt1vqVXjN5bIrKK7DxY7NKpNQjq9uxLa2R1fq9JavNb9yXu6T5ss6b/wAeK4cCvjJNJp4p6NaMhqt21Yy5ns5N8E3F8Uyxu2g4UoQlqln6G8W+N458bJL8rK+M4w+VYvrl+iKeTwzeiIK32j2lSU97y6lkvBIfpejd6Zrmp41U9kU34YLxaKE5dw0sIynveC6lr4vwOoTTAAAAAAAAD5OCknF6STT7dvfg+w+gCTq03GTi9U2n2FRyYtvOh7Nv3oacY/pp3HOv2y4pVUuEv9ZfTuOZY7TKnNTjqtm9bUdl+a7LxV+DDZbRGpFTi8n4b0+JmLrNK9bvVaGGklnGW57nwIqvRlCTjJYSWqP0I0bzuyFZZ5SWkks1we9GNZ5Y1nlEGey22pT6E2luxxj3Hq3WCdJ4TWWyS6L6maxHuJ+O1R5S1V0owl2OL8MvA2Y8qFtpPsl+hOA19136qjlyoWyk+2S9DWrcpar6MIR75P08DigfdPqti1W6pU6c21u0j3I1j6ZbLZZ1Jc2EW34Li3sM+s+sdODk0ksW9EtWWVy3YqMc/wASXSe7+FHy6LojRWL96o/iwyXBep0yuMcd1XOeAAxWmvGEXOTwSX2uso25fKW28yn7NP3p5dUdvfp3kpCDbSWreCM1utTqzc3t0W5bEb1yWXP2j00j17X9CGrzUbea6tCkoxUVsX2zIAccAAAAAAAAAAAwTxTWKawa3p6k1eFjdOWGsXnF716opTHaKEakeZLTY9sXvQHGuW83Rlg86ctVu/iRZU5qSUk8U1imtGQNqs0qcubJZ7Hsa3rgbl0XtKi8H71NvOO1cUazrjqtZ1x1VoDFZrTGpHnQlin94NbDKWVealNSWEkmnsaxRxbZybhLOnJwe54yj6o7gOWS+uWSo2vcNePwqXGLx8HgzUlYaq1pT/sk/IvQY/nGfiIGNiqv/qn/AGS9DZo3JXl/14cZNRLUD+cPiJ6x8mks6k8f4Y4pd7zO5Z7PGC5sIqK3L7zMoNzMjUkgAYrRXjCLlOSSW1/TezrrJOSSbbwS1b0I6+70daWEcqa0W9/MxfF7yrPmr3aa2bXxfoaFnoSnJRis/BcWR1rnqJa1z1HuxWV1Jc1aat7l6lLCCSSSwSySMdksypx5q7XtbMxlkAAAAAAAAAAAAAAABjtNCNSPNkstj+KL3r0J63WGVN55xekl0X6PgUoaTTTSaeqeaYEvZLXOm+dCTT2rY+tbSmu/lDTnlU9yW/4H27O05dsubbSf9Enn2S29pyKkHF4STTWxrBnZbl2Wx+hxkmsU8VvWaPpA2a2VKfQm48NV3PI61n5TTXTgpcV7rNz9I3NxUA4tLlLResZx7E14M2Fftn/ed8ZL6GvqNfUdIHNd+2f95/jL0MFXlJRWinLsSXizv1D6jsnxvDN5LjkiYtHKab6EFHi3zmcm1W2pU6c2+Gke5ZGb+kZu4prfygpwyh+0lwfuLt29hM2y2TqvGcsdy+FdSMMINvBJtvYs2dWx3PtqPD+FPPtewndWsW2tCyWSVR4JZbZPor9eBQ2WzRprCPa9r+9xkhFJYJJJaJaHo44AAAAAAAAAAAAAAAAAAAAAB5qwjJYSipLjs6nqj0AObWuWD6E3HhL3o96z8zSq3PWWkVJb4yT8NfA74AlqlmnHWEl1xZiZX857xznvfeOBIIyQs03pCT6osq+c97HOe8cCepXRWesVFb5SS8NfA3aNyxXSm5cI+6u95nTAHijSjFYRiorh9XtPYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB/9k="/>
<input type="file" />

Answer 1

HTML5 自带 File API spec ，它允许您创建让用户与本地文件交互的应用程序；这意味着您可以加载文件并在浏览器中呈现它们，而无需实际上传文件。文件 API 的一部分是 FileReader允许 Web 应用程序异步读取文件内容的接口(interface)。

var prev_image;
$(document).ready(function(){
  $("input[type='file']").change(function(){
    // handle input changes
    prev_image = $("#test_image").attr("src");
    // grab the first image in the FileList object and pass it to the function
    renderImage(this.files[0])
  });
});

// render the image in our view
function renderImage(file) {
  // generate a new FileReader object
  var reader = new FileReader();
  // inject an image with the src url
  reader.onload = function(event) {
    the_url = event.target.result
    $('#test_image').attr('src',the_url);
  }
  // when the file is read it triggers the onload event above.
  reader.readAsDataURL(file);
}

#test_image{
  width: 100px;
  height: 100px;
  -webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="test_image" src="data:image/jpg;base64,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"/>
<input type="file" />