<meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="webuploader.css"/> <!--引入JS--> <script type="text/javascript" src="jquery-1.10.1.min.js"></script> <script type="text/javascript" src="webuploader.html5only.min.js"></script> <div id="uploader-demo"> <!--用來存放item--> <div id="fileList" class="uploader-list"></div> <div id="filePicker">選擇圖片</div> </div> <script> // 初始化Web Uploader var uploader = WebUploader.create({ // 選完文件後,是否自動上傳。 auto: true, // 文件接收服務端。 server: 'up.php', // 選擇文件的按鈕。可選。 // 內部根據當前運行是建立,多是input元素,也多是flash. pick: '#filePicker',// //設置文件上傳域的name fileVal:'filePicker', // 只容許選擇圖片文件。 accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' }, }); //上傳成功後的回調 uploader.on( 'uploadSuccess', function(file) { $('#fileList').append('<img src="'+file.name+'"/>'); }) </script>
點擊上傳,會延遲幾秒 修改mineTypes image/gif,image/jpg
使用webuploader,以上代碼僅供參考。javascript