Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
</head>
<body>
  <!-- input URL -->
  <input id="url" type="text" placeholder="URLを入力">
  <!-- input file -->
  <input id="file" type="file" accept="image/*">
  <!-- output url -->
  <div id="main_url" class="main">
    <img id="view_url" class="view">
    <button class="save">保存</button>
    <button class="close">クリア</button>
  </div>
  <!-- outoput file -->
  <div id="main_file" class="main">
    <img id="view_file" class="view">
    <button class="save">保存</button>
    <button class="close">クリア</button>
  </div>
</body>
</html>
 
.main{
  display: none
}
 
$(function () {
  
  //input url
  $('#url').change(function () {
    $('#main_file').fadeOut(1);
    $('#main_url').fadeIn(500);
    $('#view_url').prop('src', this.value);
    console.log(this.value);
    var file = $('#file')[0];
    file.value = "";
  });
  //input file
  $('#file').change(function (e) {
    var reader = new FileReader();
    reader.onload = function (e) {
    $('#main_url').fadeOut(1);
    $('#main_file').fadeIn(500);
    $('#view_file').prop('src', e.target.result);
    var url = $('#url')[0];
    url.value = "";
    }
    reader.readAsDataURL(e.target.files[0]);
  });
  
  //close
  $('.close').click(function () {
    $('.main').fadeOut();
    var url = $('#url')[0];
    url.value = "";
    var file = $('#file')[0];
    file.value = "";
  });
  
});
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers