一、預覽

上傳前

上傳后

二、代碼實現

1. H5代碼

因為在modal內實現，所以直接貼modal

<div class="modal inmodal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true"><div class="modal-dialog"><div class="modal-content animated bounceInRight"><div class="modal-header"><button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">關閉</span></button><h4 class="modal-title">添加輪播圖</h4></div><div class="modal-body"><div class="row"><label for="inputUpload" id="fileBtn_add" class="col-sm-2"><input type="file" accept="image/*" name="inputUpload" id="inputUpload" onchange="upload(this)" class="hide" multiple="multiple"><img src="img/image_add.png" class="addImg"/></label></div><div class="form-group form-row" id="preViewMore"><div class="row"><div id="inputImagePreview"></div></div></div></div><div class="modal-footer"><button type="button" class="btn btn-white" data-dismiss="modal">關閉</button><button type="button" class="btn btn-primary" data-dismiss="modal">保存</button></div></div></div> </div>

2. JS部分

//添加圖片 function upload(c) {"use strict";var $show = $("#inputImagePreview");var $input = c,file = $input.files[0],reader = new FileReader();reader.readAsDataURL(file);reader.onload = function(e) {$("#fileBtn_add").hide(); /// 隱藏上傳部分$show.append('<div class="col-sm-4 addImage"><img src="' + e.target.result + '"/><a id="delClose" class="delClose">X</a></div>'); /// 手動添加圖片刪除按鈕var bytes = window.atob(e.target.result.split(',')[1]); //去掉url的頭，并轉換為byte//處理異常,將ascii碼小于0的轉換為大于0var ab = new ArrayBuffer(bytes.length);var ia = new Uint8Array(ab);for (var i = 0; i < bytes.length; i++) {ia[i] = bytes.charCodeAt(i);}//獲取圖片的blob對象，因為上傳至七牛云需要blob對象var blobData = new Blob([ab], {type: 'image/'+file.name.split(".")[1]});// 圖片上傳至七牛云qiniuUpload(blobData,file.name+Math.floor(Math.random()*(100000-1) + 1) /// 加隨機數避免因為重復圖片名稱導致 上傳失敗);}; }/// 上傳到七牛云 function qiniuUpload(cardImageUrl, fileName){"use strict";$.ajax({url: baseUrl+"/file/token", //請求獲取七牛云的tokentype: 'POST',success: function(data){var observable = qiniu.upload(cardImageUrl, //上傳圖片的blob對象fileName, //圖片名data.data.token, //token{fname: fileName,params: {}, //用來放置自定義變量mimeType: null}, {useCdnDomain: true,region: qiniu.region.z0});observable.subscribe({complete(res) {var qiniuImageAddress = '七牛云存儲地址'+res.key;}});},error: function(err){console.log(err)}}) }

3. CSS部分

.addImage{height: 100px;width: 100px;background-color: #fff;vertical-align: middle;margin-left: 5px;margin-right: 5px;margin-bottom: 5px; }.addImage img{width: auto;height: auto;max-width: 100%;max-height: 100%;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto; }.delClose{height: 20px;width: 20px;color: white;background-color:#585656;border-radius:50%;position: absolute;right: 0;text-align: center }

總結

以上是生活随笔為你收集整理的JS上传图片到七牛云的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。