快捷導(dǎo)航

JavaScript實現(xiàn)單圖片上傳并預(yù)覽功能

更新時間：2019年09月30日 09:07:42 作者：qq_43692768

這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)單圖片上傳并預(yù)覽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript實現(xiàn)單圖片上傳并預(yù)覽功能的具體代碼，供大家參考，具體內(nèi)容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>單圖片上傳并實現(xiàn)預(yù)覽</title>
 <style>
  /*上傳圖片*/
 .addPerson{
  line-height: 190px;
 }
 .addPhoto{
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 40px;
  text-align: center;
  vertical-align: middle;
  border: 1px dashed #e7eaec;
  cursor: pointer;
  display: inline-block;
 }
 .addinput{
  display: none;
 }
 .addShow{
  width: 200px;
  height: 170px;
  display: inline-block;
  vertical-align: middle;
  background: #f3f3f48f;
  margin-left: 30px;
 }
 .addShow img{
  width: 130px;
  height: 130px;
  margin: 20px auto;
  display: block;
 }
 </style>
</head>
<body>
 <div class=" addPerson">
 <label class="col-sm-2 control-label">圖片上傳</label>
  <div class="col-sm-9" style="display: inline-block;">
  <div class="addPhoto">+</div>
  <div class="addinput">
   <input type="file" class="addFile" onchange="previewFile()" name="sPicture">
  </div>
  <div class="addShow" style="position: relative">
   <img src="" class="addImg" alt="">
  </div>
  </div>
 </div>
</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>

 $(".addPhoto").click(function () {
 $('[type=file]').click();
 });

 function previewFile() {
 var preview = document.getElementsByClassName("addImg")[0];
 var file = document.getElementsByClassName('addFile')[0].files[0];
 var reader = new FileReader();

 reader.addEventListener("load", function () {
 preview.src = reader.result;

 }, false);

 if (file) {
 reader.readAsDataURL(file);
 }

 // ajax請求如下

 // 使用FormData將圖片以文件的形式傳到后臺
 // pictureFile后臺接收的參數(shù)

 // var formdata=new FormData();
 // formdata.append("pictureFile",addFile);
 // $.ajax({
 //  url:"",
 //  type:"post",
 //  dataType:"json",
 //  data:formdata,
 //  async: false, //四個false屬性不能少
 //  cache: false,
 //  contentType: false,
 //  processData: false,
 //  success:function (data) {
 //   if(data.success){
 //   myAlert(data.msg);
 //   }

 //  },
 //  error:function () {
 //   if(data.success){
 //   myAlert(data.msg);
 //   }

 //  }

 //  })
}
</script>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript數(shù)組深拷貝和淺拷貝的兩種方法
在使用JavaScript對數(shù)組進(jìn)行操作的時候，我們經(jīng)常需要將數(shù)組進(jìn)行備份，事實證明如果只是簡單的將它賦予其他變量，那么我們只要更改其中的任何一個，然后其他的也會跟著改變，這就導(dǎo)致了問題的發(fā)生。
2014-04-04
js前端實現(xiàn)登錄拼圖驗證功能
行為驗證碼通過用戶的操作來完成驗證,常見的行為驗證碼有拖動式和點(diǎn)觸式,下面這篇文章主要給大家介紹了關(guān)于js前端實現(xiàn)登錄拼圖驗證功能的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-02-02
提升JavaScript加載速度的10種方式
在許多現(xiàn)代網(wǎng)站中，有大量的JavaScript,事實上，JavaScript的下載和解析都需要時間，這使得網(wǎng)站的加載速度大大降低,有一些簡單的方法可以減少你在網(wǎng)站上加載的JavaScript數(shù)量，并使你正在加載的JavaScript加載得更快，我們今天將介紹這些方法
2023-06-06
JavaScript實現(xiàn)兩個select下拉框選項左移右移
這篇文章主要介紹了JavaScript實現(xiàn)兩個select下拉框選項左移右移功能，js實現(xiàn)下拉框元素互相移動，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-03-03
js實現(xiàn)搜索欄效果
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)搜索欄效果，以及焦點(diǎn)問題的解決，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-11-11
javascript阻止scroll事件多次執(zhí)行的思路及實現(xiàn)
阻止scroll事件多次執(zhí)行主要是為了解決一些常見網(wǎng)頁特效在js解析時預(yù)期與效果不同，感興趣的朋友可以了解下
2013-11-11
javascript實現(xiàn)考勤日歷功能
這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)考勤日歷功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-11-11
深入理解javascript函數(shù)參數(shù)與閉包
函數(shù)是javascript的一等對象，想要學(xué)好javascript，就必須深刻理解函數(shù)。本文對javascript函數(shù)參數(shù)與閉包進(jìn)行詳細(xì)分析介紹。需要的朋友一起來看下吧
2016-12-12
JavaScript?深拷貝的循環(huán)引用問題詳解
如果說道實現(xiàn)深拷貝最簡單的方法，我們第一個想到的就是?JSON.stringify()?方法，因為JSON.stringify()后返回的是字符串，所以我們會再使用JSON.parse()轉(zhuǎn)換為對象,這篇文章主要介紹了JavaScript?深拷貝的循環(huán)引用問題,需要的朋友可以參考下
2022-12-12
JS獲取IMG圖片高寬的簡單實例
下面小編就為大家?guī)硪黄狫S獲取IMG圖片高寬的簡單實例。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-05-05