Jquery Image上傳圖片是一種方便快捷的圖片上傳工具。通過使用Jquery Image插件,用戶可以在網頁上直接上傳圖片,方便快捷。
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script> <script src="https://cdn.bootcss.com/blueimp-file-upload/9.28.0/js/jquery.fileupload.min.js"></script>
使用Jquery Image上傳圖片非常簡單。只需要在HTML頁面中引入Jquery、Md5和File Upload插件即可。
然后在JavaScript中調用File Upload插件,并初始化File Upload插件即可。
$("#fileUpload").fileupload({ url: "upload.php", dataType: 'json', autoUpload: true, add: function (e, data) { var uploadErrors = []; var acceptFileTypes = /^image\/(gif|jpe?g|png)$/i; if(data.originalFiles[0]['type'].length && !acceptFileTypes.test(data.originalFiles[0]['type'])) { uploadErrors.push('只支持 JPG, GIF, PNG 類型的圖片'); } if(data.originalFiles[0]['size'].length && data.originalFiles[0]['size'] >5000000) { uploadErrors.push('圖片大小不能超過 5MB'); } if(uploadErrors.length === 0) { var formData = { "timestamp" : Date.parse(new Date())/1000, "token" : $.md5('upload'+Date.parse(new Date())/1000), } data.formData = formData; data.submit(); } else { alert(uploadErrors.join("\n")); } }, done:function(e,data){ if(data.result.state === 'SUCCESS'){ $("#filePath").val(data.result.url); $("#viewImg").attr('src',data.result.url); }else{ alert(data.result.state); } } });
初始化File Upload插件時需要設置一些參數,例如上傳文件的路徑、dataType、自動上傳等參數。
在add回調函數中,可以對上傳的文件進行檢查。例如,可以檢查圖片的類型、大小等信息。
如果上傳的文件檢查通過,則可以創建一個formData對象,并將其附加到data.formData屬性上。
最后調用data.submit()方法即可開始上傳。
在done回調函數中,可以對上傳的結果進行處理。如果上傳成功,則可以將圖片的地址保存到一個隱藏的文本框中,或者通過Ajax提交到服務器等等操作。
通過以上步驟,即可使用Jquery Image上傳圖片。
上一篇福特f0css是什么車
下一篇mysql臨時表模式