2017-07-11 1st ohisama1 Follow 2017-07-16 09:54:12 License: MIT License Fork0 Fav0 View223 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 62 lines HTML 18 lines CSS 10 lines 2017-07-11 1st $(function() { var $fileList = $('#file_list'); $fileList.on('click.deleteFile', '.delete_btn', function() { var $li = $(this).closest('.each_file'); $li.remove(); var $fileListLI = $('#file_list li input[name=img_file]'); var inputFileNum = $fileListLI.length; var lastInputFile = $fileListLI.eq(-1); if (inputFileNum < 4) { $(lastInputFile).show(); } return false; }) $fileList.on('change.inputFile', '.input_file', function(e) { var $input = $(this), $li = $input.closest('.each_file'), $newLi = $li.clone(); $fileList.append($newLi); var file = e.target.files[0], fileName = file.name; reader = new FileReader(); reader.readAsDataURL(file); reader.onloadend = function() { var fileReader = this; if (fileReader.result) { var thumb = '<div class = "thumbnail"><img src = "' + fileReader.result + '" width = "150px" style = "max-width: 150px;">' + fileName + '<button class = "delete_btn">削除</button></div>'; $li.append(thumb); } return this; }; $input.hide(); var $fileListLI = $('#file_list li input[name=img]'); var inputFileNum = $fileListLI.length; var lastInputFile = $fileListLI.eq(-1); if (inputFileNum == 4) { $(lastInputFile).hide(); } var fd = new FormData(); var targetFile = $fileListLI.eq(-2); fd.append("file", $(targetFile).prop("files")[0]); $.ajax({ url: 'http:///cgi-bin/test5.py', type: 'post', dataType: 'json', data: fd, processData: false, contentType: false }).done(function(res) { alert(res); }).fail(function(jqXHR, statusText, errorThrown) { alert(errorThrown); }); return this; }); }); <script src="js/jquery-1.12.4.min.js" charset="utf-8"></script> <style media="screen"> li{ list-style: none; } </style> <h1>Ajax sample</h1> <form action="upload.php" method="post" enctype="multipart/form-data"> <ul id="file_list"> <li class="each_file"> <input type="file" name="img" value="" accept="image/*"> </li> </ul> <input type="submit" id="submit_btn" value="画像アップロード"> </form> 2017-07-11 1st * { margin: 0; padding: 0; border: 0; } body { background: #dfd; font: 30px sans-serif; } $(function() { var $fileList = $('#file_list'); $fileList.on('click.deleteFile', '.delete_btn', function() { var $li = $(this).closest('.each_file'); $li.remove(); var $fileListLI = $('#file_list li input[name=img_file]'); var inputFileNum = $fileListLI.length; var lastInputFile = $fileListLI.eq(-1); if (inputFileNum < 4) { $(lastInputFile).show(); } return false; }) $fileList.on('change.inputFile', '.input_file', function(e) { var $input = $(this), $li = $input.closest('.each_file'), $newLi = $li.clone(); $fileList.append($newLi); var file = e.target.files[0], fileName = file.name; reader = new FileReader(); reader.readAsDataURL(file); reader.onloadend = function() { var fileReader = this; if (fileReader.result) { var thumb = '<div class = "thumbnail"><img src = "' + fileReader.result + '" width = "150px" style = "max-width: 150px;">' + fileName + '<button class = "delete_btn">削除</button></div>'; $li.append(thumb); } return this; }; $input.hide(); var $fileListLI = $('#file_list li input[name=img]'); var inputFileNum = $fileListLI.length; var lastInputFile = $fileListLI.eq(-1); if (inputFileNum == 4) { $(lastInputFile).hide(); } var fd = new FormData(); var targetFile = $fileListLI.eq(-2); fd.append("file", $(targetFile).prop("files")[0]); $.ajax({ url: 'http:///cgi-bin/test5.py', type: 'post', dataType: 'json', data: fd, processData: false, contentType: false }).done(function(res) { alert(res); }).fail(function(jqXHR, statusText, errorThrown) { alert(errorThrown); }); return this; }); }); <script src="js/jquery-1.12.4.min.js" charset="utf-8"></script> <style media="screen"> li{ list-style: none; } </style> <h1>Ajax sample</h1> <form action="upload.php" method="post" enctype="multipart/form-data"> <ul id="file_list"> <li class="each_file"> <input type="file" name="img" value="" accept="image/*"> </li> </ul> <input type="submit" id="submit_btn" value="画像アップロード"> </form> * { margin: 0; padding: 0; border: 0; } body { background: #dfd; font: 30px sans-serif; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author ohisama1 Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/mhII/js"></script> application Discussion Questions on this code? Tags application