溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例為大家分享了JavaScript實現圖片上傳并預覽并提交ajax的具體代碼，供大家參考，具體內容如下
圖片上傳并預覽
HTML
<div class="file-box"> <img id="preview" /> <input type="text" id="imgfield" class="txt" placeholder="預覽"> <input type="file" name="file" id = "input_file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" "imgPreview(this)" > </div>
css
.file-box {
position: relative;
display: inline-block;
}
.file-box img {
width: 50px;
height: 50px;
border-radius: 50%;
position: absolute;
top: -30px;
left: 0;
display: inline-block;
border: none;
}
.file-box .txt,.file-box .file {
width: 70px;
height: 36px;
position: absolute;
top: -20px;
left: 100px;
text-align: center;
}
JS
function imgPreview(fileDom) {
//判斷是否支持FileReader
if(window.FileReader) {
var reader = new FileReader();
} else {
alert("您的設備不支持圖片預覽功能，如需該功能請升級您的設備！");
}
//獲取文件
var file = fileDom.files[0];
var imageType = /^image\//;
//是否是圖片
if(!imageType.test(file.type)) {
alert("請選擇圖片！");
return;
}
//讀取完成
reader.onload = function(e) {
//獲取圖片dom
var img = document.getElementById("preview");
//圖片路徑設置為讀取的圖片
img.src = e.target.result;
};
reader.readAsDataURL(file);
}
上傳圖片提交ajax
如果想把圖片信息通過ajax傳給后端，則需要通過new FormData() 上傳圖片信息，然后使用 append() 方法向該對象里添加字段，具體代碼如下：
(注：以下代碼在圖片預覽成功后執行，也就是在reader.readAsDataURL(file); 后)
var formData = new FormData();
formData.append('file', $('#input_file')[0].files[0]); //添加圖片信息的參數
formData.append('sizeid',123); //添加其他參數
$.ajax({
url: '/material/uploadFile',
type: 'POST',
cache: false, //上傳文件不需要緩存
data: formData,
processData: false, // 告訴jQuery不要去處理發送的數據
contentType: false, // 告訴jQuery不要去設置Content-Type請求頭
success: function (data) {
var rs = eval("("+data+")");
if(rs.state==1){
tipTopShow('上傳成功！');
}else{
tipTopShow(rs.msg);
}
},
error: function (data) {
tipTopShow("上傳失敗");
}
})
更多精彩內容請參考專題《ajax上傳技術匯總》，《javascript文件上傳操作匯總》和《jQuery上傳操作匯總》進行學習。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
