$(document).ready(function(){ $("#file").change(function(){ var src=$("#file").val(); if(src!="") { formdata= new FormData(); var numfiles=this.files.length; var i, file, progress, size; for(i=0;i<numfiles;i++) { file = this.files[i]; size = this.files[i].size; name = this.files[i].name; if (!!file.type.match(/image.*/)) { if((Math.round(size))<=(1024*1024)) { var reader = new FileReader(); reader.readAsDataURL(file); $("#preview").show(); $('#preview').html(""); reader.onloadend = function(e){ var image = $('<img>').attr('src',e.target.result); $(image).appendTo('#preview'); }; formdata.append("file[]", file); if(i==(numfiles-1)) { } } else { $("#info").html(name+"Size limit exceeded"); $("#preview").hide(); return; } } else { $("#info").html(name+"Not image file"); $("#preview").hide(); return; } } } else { $("#info").html("Select an image file"); $("#preview").hide(); return; } return false; }); });
<body> <div class="osbnavbar"> <a href="http://www.osblogger.com/ajax-multiple-image-upload-using-php/">Back to article</a> <a href="http://twitter.com/prkr92">© Prabhakaran Arunachlam</a> <span class="right"> <a href="http://www.osblogger.com"> <img src="osblogo.png" style=" margin-top:6px;" title="To home" alt="OSBlogger" /> </a> </span> </div> <div id="container"> <h1 class="title">Multiple image upload using ajax and php</h1> <div id="uploaded"></div> <div id="upload_progress"></div> <form method="POST" action="upload.php" enctype="multipart/form-data"> <input class="but" type="file" id="file" name="file[]" multiple="multiple" name="file"/> </form> <div id="info"></div> </div> <div id="preview"> </div> </body>
เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง