JavaScript中的FileReader圖片預覽上傳功能實現代碼
更新時間：2017年07月24日 15:52:13 作者：shengmeshi
本文通過實例代碼給大家介紹了js中的FileReader圖片預覽上傳功能，代碼分為html和js代碼兩部分，具體實現代碼大家參考下本文
關于filereader圖片預覽上傳功能的實現代碼如下所示：
html:
<div style="width:200px;height:200px;"> <label for="ceshi" style="display:block;"> <img style="width:200px;height:200px;" id="image" src=""/> <input id="ceshi" type="file" onchange="selectImage(this);" hidden/> </label> </div>
js:
var image = '';
function selectImage(file){
if(!file.files || !file.files[0]){
return;
}
var reader = new FileReader();
reader.onload = function(evt){
document.getElementById('image').src = evt.target.result;
image = evt.target.result;
}
reader.readAsDataURL(file.files[0]);
}
function uploadImage(){
console.log(image);
$.ajax({
type:'POST',
url: 'ajax/uploadimage', //圖片上傳地址
data: {image: image},
async: true,
dataType: 'json',
success: function(data){
if(data.success){
alert('上傳成功');
}else{
alert('上傳失敗');
}
},
error: function(err){
alert('網絡故障');
}
});
}
引用：<script src="js/jQuery.min.js"></script>
總結
以上所述是小編給大家介紹的JavaScript中的FileReader圖片預覽上傳功能實現代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
您可能感興趣的文章:
相關文章
相信大家在web項目中，經常會用到javascript的事件監(jiān)聽、事件冒泡這些東西。當然也包括window.opener,window.showModalDialog這些父子窗口的互操作。2010-06-06
在很多地方，我們都可以看到，上傳圖片的時候，圖片都會被加上默認的水印，因此，我們在個人網站進行圖片操作時，也可以給它加上自己獨特的水印，本文就為大家整理了JS添加圖片合文字水印的方法，需要的可以參考一下2023-05-05
最近整理一下之前做的一個項目，把滾動條動態(tài)固定頂部的代碼整理出來和大家分享2017-07-07
這篇文章給大家介紹了js實現各種排序功能，包括冒泡排序，選擇排序和插入排序，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧2017-08-08
最近小編接到這樣的項目需求，接口返回的數據中時間單位為秒，但前端顯示的時候需要更人性化的帶有單位（天，小時，分鐘，秒）的字符串；下面小編給大家?guī)韺嵗a，感興趣的朋友跟隨小編一起看看吧2019-07-07
這篇文章主要介紹了Javascript中對象繼承的實現,需要的朋友可以參考下2014-05-05
這篇文章主要介紹了js限制input標簽中只能輸入中文的的相關資料,需要的朋友可以參考下2015-06-06
用js實現的記錄鼠標的軌跡并回放的效果，非常不錯。2010-04-04
這篇文章主要為大家詳細介紹了微信小程序云開發(fā)之使用云數據庫，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
如果是非IE8瀏覽器例如（IE7、IE9、Chrome、FF，僅測試這幾種）通過屬性和數組遍歷，其結果是一樣的，但對于IE8，結果會有一點小小的差異，在IE8下會把原型鏈擴展方法當做一個屬性輸出，大家可以測試一下2013-05-05