Jquery Image上傳圖片是一種方便快捷的圖片上傳工具。通過使用Jquery Image插件，用戶可以在網(wǎng)頁上直接上傳圖片，方便快捷。

<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上傳圖片非常簡(jiǎn)單。只需要在HTML頁面中引入Jquery、Md5和File Upload插件即可。

然后在JavaScript中調(diào)用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插件時(shí)需要設(shè)置一些參數(shù)，例如上傳文件的路徑、dataType、自動(dòng)上傳等參數(shù)。

在add回調(diào)函數(shù)中，可以對(duì)上傳的文件進(jìn)行檢查。例如，可以檢查圖片的類型、大小等信息。

如果上傳的文件檢查通過，則可以創(chuàng)建一個(gè)formData對(duì)象，并將其附加到data.formData屬性上。

最后調(diào)用data.submit()方法即可開始上傳。

在done回調(diào)函數(shù)中，可以對(duì)上傳的結(jié)果進(jìn)行處理。如果上傳成功，則可以將圖片的地址保存到一個(gè)隱藏的文本框中，或者通過Ajax提交到服務(wù)器等等操作。

通過以上步驟，即可使用Jquery Image上傳圖片。