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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>單圖片上傳并實(shí)現(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請(qǐng)求如下

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

 // var formdata=new FormData();
 // formdata.append("pictureFile",addFile);
 // $.ajax({
 //  url:"",
 //  type:"post",
 //  dataType:"json",
 //  data:formdata,
 //  async: false, //四個(gè)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>

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

您可能感興趣的文章:

相關(guān)文章

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