H5圖片回顯 加 圖片數量限制
阿新 • • 發佈：2019-02-13
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>圖片回顯</title> <script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script> </head> <body> <script type="text/javascript"> function changImg(id, e) { var file = e.target.files.item(0); var freader = new FileReader(); /* readAsDataURL方法會使用base-64進行編碼，編碼的資料由data字串開始， 後面跟隨的是MIME type，然後再加上base64字串，逗號之後就是編碼過的影象檔案的內容。 */ freader.readAsDataURL(file); freader.onload = function(e) { $("#" + id).attr("src", e.target.result); } } </script> 使用方式: <form action=""> <img alt="暫無圖片" id="myImg" src="" height="100px" ,width="100px" onclick="javascript:$('#file').click()"> <input type="file" name="files" accept="image/*" id="file" style="display: none;" onchange="changImg('myImg',event)"> </form> </body> </html>
<div class="row"> <div class="col"><input id="FilesWithTen" type="file" multiple="multiple"/></div> </div> <script> $(function() { $("#FilesWithTen").change(function() { var files = this.files; if (files && files.length > 10) { alert("超過10"); this.value = "" //刪除選擇 // $(this).focus(); //開啟選擇視窗 } }) }) </script> <script> $(function() { $("#FilesWithTen").change(function() { var temp = []; var files = this.files; if (files && files.length > 10) { //Array.prototype.push.apply(temp, files); for (var i = 0; i < 10; i++) { temp.push(files[i]); } this.value = ""; //因為files =》 FileList是隻讀的，所以不能直接修改input type=file 的值， //只能置null，所以只能通過js提交action，簡單的方式就是超過10個，置null，使用者在選擇一次 $.ajax({ url: 'action', type: 'post', data: new FormData().append("s",temp), success: function(rs) { } }) } }) }) </script>