首先，我用到了一款外掛，是純JS壓縮上傳外掛，第一次用CSDN，不太會用，我把外掛所有程式碼拷貝在文章末尾。

載入JS外掛<script src="__JS__/dist/lrz.mobile.min.js"></script>

頁面上傳圖片：

    <div class="fileupload-buttonbar">
        <a type="button" class="am-btn am-btn-sm am-fl " style="  line-height: 0.2;"><img
src="__IMG__/image.png"
 
></a>

        <div class="fileinput-button" style="width: 100%">
            <input type="file" name="files" class="btn" id="choose"
style="left: 35px;position:absolute;z-index: 1;width: 35px;height:40px;opacity: 0;cursor: pointer;"
data-url="{:U('Core/File/uploadPictureBase64')}" multiple
 
/></div>

        <style>
            .img-list li {
                float: left;
position: relative;
display: inline-block;
width: 100px;
height: 100px;
margin: 5px 5px 20px 5px;
border: 1px solid rgb(100, 149, 198);
background: #fff no-repeat center;
background-size: cover;
border-radius: 5px
 
;
}
        </style>
    </div>
    <!--插入圖片表情結束-->
    <!--釋出按鈕-->
<p class="submitweibo" url="{:U('Mob/Weibo/doSend')}">
        <button style="float: right" type="submit" class="am-btn am-btn-primary am-btn-block">釋出</button>
    </p>
    <!--釋出按鈕END-->
</div>
<ul class="img-list am-fl" style="padding-left:0px;">
    <!--圖片顯示區域-->
</ul>

圖片id存放，隱藏input，放在頁面的form表單內即可。

<input type="hidden" id="img_ids" name="attach_ids" value="">

js程式碼

//新上傳圖片
function add_img() {
    var filechooser = document.getElementById("choose");
$("#upload").on("click", function () {
        filechooser.click();
})
    filechooser.onchange = function () {
        if (!this.files.length) return;
var files = Array.prototype.slice.call(this.files);
if (files.length > 9) {
            alert("最多同時只可上傳9張圖片");
return;
}
        files.forEach(function (files, i) {
            if (!/\/(?:jpeg|png|gif)/i.test(files.type)){
                toast.error('上傳圖片格式不符！');
}
            var div = ' <li class="waitbox loadingBox">\
            <img src= ' + _LOADING_ + '  style="width:90px,hight:90px"> \
        </li> ';
$('.img-list').append(div);
lrz(files, {
                width: 1200,
height: 900,
before: function () {
                    console.log('壓縮開始');
},
fail: function (err) {
                    console.error(err);
},
always: function () {
                    console.log('壓縮結束');
},
done: function (results) {
                    // 你需要的資料都在這裡，可以以字串的形式傳送base64給服務端轉存為圖片。
var data=results.base64;
upload(data);
}
            });
})
    }
}

function removeLi(li,file_id) {
console.log(li)
    upAttachVal('remove', file_id, $('#img_ids'))
    $(li).parent('.waitbox').remove();
}
//圖片上傳，返回id ,地址
function upload(data) {
    console.log(data);
var dataUrl = U('Core/File/uploadPictureBase64');
$.post(dataUrl, {data: data}, function (msg) {
        if (msg.status == 1) {
            var ids = $('#img_ids').val();
upAttachVal('add', msg.id, $('#img_ids'));
//上傳成功顯示圖片
var div = ' <li class="waitbox">\
                <a class="del-btn am-icon-close"  onclick="removeLi(this, '+msg.id+')" style="position:absolute;right: 5px;top: -5px;color: red"></a>\
            <img src= ' + msg.path + '  style="width:99px;height:99px;"> \
        </li> ';
$('.loadingBox').hide();
$('.img-list').append(div);
} else {
            toast.error(msg.info);
}
    }, 'json')

}

function upAttachVal(type, attachId, obj) {
    var $attach_ids = obj;
var attachVal = $attach_ids.val();
var attachArr = attachVal.split(',');
var newArr = [];
for (var i in attachArr) {
        if (attachArr[i] !== '' && attachArr[i] !== attachId.toString()) {
            newArr.push(attachArr[i]);
}
    }
    type === 'add' && newArr.push(attachId);
if (newArr.length <= 9) {
        $attach_ids.val(newArr.join(','));
return newArr;
} else {
        return false;
}

}

後臺php程式碼：

public function uploadPictureBase64()
{

    $aData = $_POST['data'];

    if ($aData == '' || $aData == 'undefined') {
        $this->ajaxReturn(array('status'=>0,'info'=>'引數錯誤'));
    }

    if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $aData, $result)) {
        $base64_body = substr(strstr($aData, ','), 1);

        empty($aExt) && $aExt = $result[2];
    } else {
        $base64_body = $aData;
    }

    empty($aExt) && $aExt = 'jpg';

    $pictureModel = D('Picture');

    $md5 = md5($base64_body);
    $sha1 = sha1($base64_body);


    $check = $pictureModel->where(array('md5' => $md5, 'sha1' => $sha1))->find();

    if ($check) {
        //已存在則直接返回資訊
$return['id'] = $check['id'];
        $return['path'] = render_picture_path($check['path']);
        $this->ajaxReturn(array('status'=>1,'id'=>$return['id'],'path'=> $return['path']));
    } else {
        //不存在則上傳並返回資訊
$driver = modC('PICTURE_UPLOAD_DRIVER','local','config');
        $driver = check_driver_is_exist($driver);
        $date = date('Y-m-d');
        $saveName = uniqid();
        $savePath = '/Uploads/Picture/' . $date . '/';

        $path = $savePath . $saveName . '.' . $aExt;
        if($driver == 'local'){
            //本地上傳
mkdir('.' . $savePath, 0777, true);
            $data = base64_decode($base64_body);
            $rs = file_put_contents('.' . $path, $data);
        }
        else{
            $rs = false;
            //使用雲端儲存
$name = get_addon_class($driver);
            if (class_exists($name)) {
                $class = new $name();
                if (method_exists($class, 'uploadBase64')) {
                    $path = $class->uploadBase64($base64_body,$path);
                    $rs = true;
                }
            }
        }
        if ($rs) {
            $pic['type'] = $driver;
            $pic['path'] = $path;
            $pic['md5'] = $md5;
            $pic['sha1'] = $sha1;
            $pic['status'] = 1;
            $pic['create_time'] = time();
            $id = $pictureModel->add($pic);
           $this->ajaxReturn (array('status'=>1,'id' => $id, 'path' => render_picture_path($path)));
        } else {
            $this->ajaxReturn(array('status'=>0,'圖片上傳失敗。'));
        }

    }
}

function render_picture_path($path)
{
    $path = get_pic_src($path);
    return is_bool(strpos($path, 'http://')) ? 'http://' . str_replace('//', '/', $_SERVER['HTTP_HOST'] . '/' . $path) : $path;
}

function get_pic_src($path)
{

    //不存在http://
$not_http_remote = (strpos($path, 'http://') === false);
    //不存在https://
$not_https_remote = (strpos($path, 'https://') === false);
    if ($not_http_remote && $not_https_remote) {
        //本地url
return str_replace('//', '/', getRootUrl() . $path); //防止雙斜槓的出現
} else {
        //遠端url
return $path;
    }
}

外掛程式碼：

!function (e) {
    Array.prototype.map || (Array.prototype.map = function (e, r) {
        var a, t, n;
        if (null == this)throw new TypeError(" this is null or not defined");
        var o = Object(this), i = o.length >>> 0;
        if ("function" != typeof e)throw new TypeError(e + " is not a function");
        for (r && (a = r), t = Array(i), n = 0; i > n;) {
            var l, d;
            n in o && (l = o[n], d = e.call(a, l, n, o), t[n] = d), n++
}
        return t
    });
    var r = e.detect = function () {
        var e = function () {
        }, r = {
            browser_parsers: [{
                regex: "^(Opera)/(\\d+)\\.(\\d+) \\(Nintendo Wii",
                family_replacement: "Wii",
                manufacturer: "Nintendo"
}, {
                regex: "(SeaMonkey|Camino)/(\\d+)\\.(\\d+)\\.?([ab]?\\d+[a-z]*)",
                family_replacement: "Camino",
                other: !0
}, {
                regex: "(Pale[Mm]oon)/(\\d+)\\.(\\d+)\\.?(\\d+)?",
                family_replacement: "Pale Moon (Firefox Variant)",
                other: !0
}, {
                regex: "(Fennec)/(\\d+)\\.(\\d+)\\.?([ab]?\\d+[a-z]*)",
                family_replacement: "Firefox Mobile"
}, {
                regex: "(Fennec)/(\\d+)\\.(\\d+)(pre)",
                family_replacment: "Firefox Mobile"
}, {
                regex: "(Fennec)/(\\d+)\\.(\\d+)",
                family_replacement: "Firefox Mobile"
}, {
                regex: "Mobile.*(Firefox)/(\\d+)\\.(\\d+)",
                family_replacement: "Firefox Mobile"
}, {
                regex: "(Namoroka|Shiretoko|Minefield)/(\\d+)\\.(\\d+)\\.(\\d+(?:pre)?)",
                family_replacement: "Firefox ($1)"
}, {
                regex: "(Firefox)/(\\d+)\\.(\\d+)(a\\d+[a-z]*)",
                family_replacement: "Firefox Alpha"
}, {
                regex: "(Firefox)/(\\d+)\\.(\\d+)(b\\d+[a-z]*)",
                family_replacement: "Firefox Beta"
}, {
                regex: "(Firefox)-(?:\\d+\\.\\d+)?/(\\d+)\\.(\\d+)(a\\d+[a-z]*)",
                family_replacement: "Firefox Alpha"
}, {
                regex: "(Firefox)-(?:\\d+\\.\\d+)?/(\\d+)\\.(\\d+)(b\\d+[a-z]*)",
                family_replacement: "Firefox Beta"
}, {
                regex: "(Namoroka|Shiretoko|Minefield)/(\\d+)\\.(\\d+)([ab]\\d+[a-z]*)?",
                family_replacement: "Firefox ($1)"
}, {
                regex: "(Firefox).*Tablet browser (\\d+)\\.(\\d+)\\.(\\d+)",
                family_replacement: "MicroB",
                tablet: !0
}, {regex: "(MozillaDeveloperPreview)/(\\d+)\\.(\\d+)([ab]\\d+[a-z]*)?"}, {
                regex: "(Flock)/(\\d+)\\.(\\d+)(b\\d+?)",
                family_replacement: "Flock",
                other: !0
}, {
                regex: "(RockMelt)/(\\d+)\\.(\\d+)\\.(\\d+)",
                family_replacement: "Rockmelt",
                other: !0
}, {
                regex: "(Navigator)/(\\d+)\\.(\\d+)\\.(\\d+)",
                family_replacement: "Netscape"
}, {
                regex: "(Navigator)/(\\d+)\\.(\\d+)([ab]\\d+)",
                family_replacement: "Netscape"
}, {
                regex: "(Netscape6)/(\\d+)\\.(\\d+)\\.(\\d+)",
                family_replacement: "Netscape"
}, {
                regex: "(MyIBrow)/(\\d+)\\.(\\d+)",
                family_replacement: "My Internet Browser",
                other: !0
}, {
                regex: "(Opera Tablet).*Version/(\\d+)\\.(\\d+)(?:\\.(\\d+))?",
                family_replacement: "Opera Tablet",
                tablet: !0
}, {
                regex: "(Opera)/.+Opera Mobi.+Version/(\\d+)\\.(\\d+)",
                family_replacement: "Opera Mobile"
}, {regex: "Opera Mobi", family_replacement: "Opera Mobile"}, {
                regex: "(Opera Mini)/(\\d+)\\.(\\d+)",
                family_replacement: "Opera Mini"
}, {
                regex: "(Opera Mini)/att/(\\d+)\\.(\\d+)",
                family_replacement: "Opera Mini"
}, {
                regex: "(Opera)/9.80.*Version/(\\d+)\\.(\\d+)(?:\\.(\\d+))?",
                family_replacement: "Opera"
}, {regex: "(webOSBrowser)/(\\d+)\\.(\\d+)", family_replacement: "webOS"}, {
                regex: "(webOS)/(\\d+)\\.(\\d+)",
                family_replacement: "webOS"
}, {regex: "(wOSBrowser).+TouchPad/(\\d+)\\.(\\d+)", family_replacement: "webOS TouchPad"}, {
                regex: "(luakit)",
                family_replacement: "LuaKit",
                other: !0
}, {
                regex: "(Lightning)/(\\d+)\\.(\\d+)([ab]?\\d+[a-z]*)",
                family_replacement: "Lightning",
                other: !0
}, {
                regex: "(Firefox)/(\\d+)\\.(\\d+)\\.(\\d+(?:pre)?) \\(Swiftfox\\)",
                family_replacement: "Swiftfox",
                other: !0
}, {
                regex: "(Firefox)/(\\d+)\\.(\\d+)([ab]\\d+[a-z]*)? \\(Swiftfox\\)",
                family_replacement: "Swiftfox",
                other: !0
}, {
                regex: "rekonq",
                family_replacement: "Rekonq",
                other: !0
}, {
                regex: "(conkeror|Conkeror)/(\\d+)\\.(\\d+)\\.?(\\d+)?",
                family_replacement: "Conkeror",
                other: !0
}, {
                regex: "(konqueror)/(\\d+)\\.(\\d+)\\.(\\d+)",
                family_replacement: "Konqueror",
                other: !0
}, {
                regex: "(WeTab)-Browser",
                family_replacement: "WeTab",
                other: !0
}, {
                regex: "(Comodo_Dragon)/(\\ 
 

            
  
           

              
              
            
            
相關推薦
			   
            
            
            
 

    

    
    
手機網頁版JS壓縮上傳圖片--base64位 相容IOS和安卓
     
 
                

首先，我用到了一款外掛，是純JS壓縮上傳外掛，第一次用CSDN，不太會用，我把外掛所有程式碼拷貝在文章末尾。
載入JS外掛<script src="__JS__/dist/lrz.mobile.min.js"></script>



 

  
 

    

    
    
前端js壓縮上傳圖片 多圖、單圖 ajax上傳
     
  
 
  
  
      <script>
       /*
        三個引數
        file：一個是檔案(型別是圖片格式)，
        w：一個是檔案壓縮的後寬度，寬度越小，位元組越小
        objDiv：一個是容器或者回調函式
        phot 

  
 

    

    
    
Java開發公眾號系列教程(一)：微信js-sdk上傳手機相簿照片相容IOS和安卓裝置
     
 
                很多開發者朋友在進行微信公眾號開發時，遇到微信js-sdk上傳手機相簿照片時IOS裝置無法正常預覽的情況，今天筆者結合多多年的開發經驗，把相容IOS的解決方案分享給廣大微信開發者朋友。





一、首先申明一點筆者本案例用的微信JSSDK版本是1.2.0的，官方文件給出的最 

  
 

    

    
    
Java開發公眾號系列教程(一)：微信js-sdk上傳照片相容IOS和安卓裝置
     
  
 
 
 很多開發者朋友在進行微信公眾號開發時，遇到微信js-sdk上傳手機相簿照片時IOS裝置無法正常預覽的情況，今天筆者結合多年的開發經驗，把相容IOS的解決方案分享給廣大微信開發者朋友。 
 微信最新版本JSSDK文件 地址https://mp.weixin.qq.com/advanced/wiki 

  
 

    

    
    
js h5 上傳圖片 轉成base64  進行圖片壓縮 不失真
     
 
								
								            
						
                
<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="vie 

  
 

    

    
    
PHP壓縮上傳圖片
     
 是否   amp   break   class   gef   char   mar   fread   type   最近手上的項目頁面要顯示很多圖片，雖然用了jQuery的lazyload，但是效果並沒理想，滑動到一個區域還要比較長的時間圖片才完全顯示出來。於是想著將上傳上去的900KB+壓縮備份一份縮 

  
 

    

    
    
使用JS-SDK上傳圖片（檔案）到七牛
     
  
 
 一、介紹 Qiniu-JavaScript-SDK （下文簡稱為 JS-SDK）適用於 ：IE11、Edge、Chrome、Firefox、Safari 等瀏覽器，基於七牛雲端儲存官方 API 構建，其中上傳功能基於 H5 File API。開發者基於 JS-SDK 可以方便的從瀏覽器端上傳檔案至七 

  
 

    

    
    
ueditor編輯器asp版不能上傳圖片的解決方法(800a0046)
     
  
 
 第一步，先去IIS 中，開啟ASP 設定頁面，把錯誤資訊傳送到瀏覽器，有助於找到問題。 
  
 使用百度開源ueditor編輯器不能上傳圖片並報伺服器500錯誤 
  
 初看是 Uploader.Class 的 fs.CreateFolder( path )&nbs 

  
 

    

    
    
通過js操作上傳圖片，直接在頁面顯示
     
  
 
 
 1.按照常規的邏輯： 
 我們通過ajax，或者form表單將檔案提交到後臺，將檔案儲存在某個臨時的目錄下，然後拿到這個儲存路徑，在前臺頁面賦值個<img>的src。 
 今天我們不走後臺邏輯，即點選上傳後，即可就在頁面進行顯示，ok，let's go! 
 2.程式碼如下 
 &l 

  
 

    

    
    
JS實現上傳圖片預覽功能
     
 
							
							
							js實現上傳圖片預覽功能思路是獲取上傳圖片本地路徑，再載入到頁面中實現上傳預覽 
HTML程式碼



<div class="upload">
        <input type="button" class="btn" onclick= 

  
 

    

    
    
微信js-sdk 上傳圖片、下載圖片介面
     
 
                
前提已經在wx.config()中,將圖片介面驗證通過。
微信js-sdk 中上傳圖片介面(uploadImage)和下載圖片介面(downloadImage)都是針對微信伺服器本身的。以官方文件為準
注：
1.使用chooseImage介面獲取到微信客戶端圖片地址的與都是 

  
 

    

    
    
Android WebView上傳圖片(base64)到H5(JS)
     
 
							
							
							最近專案需求是H5呼叫安卓的方法選擇圖片或者開啟照相機拍照，然後傳給H5顯示圖片，最後由H5上傳到伺服器。查了一下資料，大概有以下幾種方法：


利用WebChromeClient的openFileChooser（5.0+是onShowFileChooser）
 

  
 

    

    
    
六四、使用JS-SDK上傳圖片（檔案）到七牛
     
 
								
								            
							
							
							一、介紹


Qiniu-JavaScript-SDK （下文簡稱為 JS-SDK）適用於 ：IE11、Edge、Chrome、Firefox、Safari 等瀏覽器，基於七牛雲端儲存官方 API 構建 

  
 

    

    
    
微信js-sdk上傳圖片{"errorMsg":"uploadImage:missing arguments"}
     
  

  window.onload = function(){
                  var url = location.href.split("#")[0];
  &nb 

  
 

    

    
    
Android webview與js互動上傳圖片
     
 
                
最近專案中用到webview，並且有上傳圖片功能，iOS不用做任何處理，但Android就不行了，調不到相簿，後百度才知道這是Android webview的侷限性，需要自己擴充套件WebChromeClient來實現，話不多說直接上程式碼：
第一步：擴充套件WebChro 

  
 

    

    
    
react-native-image-picker在Android上閃退的解決辦法（上傳頭像base64，壓縮上傳圖片）
     
 
								
								            
							
							
							
問題描述：最近做專案上傳頭像時用到了react-native-image-picker第三方庫，使用的是 base64格式 上傳，在以下配置的情況下，android點選選擇相簿會遇到閃退的問題，找到了 

  
 

    

    
    
js實現上傳圖片並顯示的兩種實現方式(無需上傳到伺服器再顯示)
     
 
							
							
							方法一：



<input type='file' id='chooseFile'>
<img src='' id='picToCheck'/>
document
        .querySelector('#chooseFile' 

  
 

    

    
    
js實現上傳圖片實時預覽
     
 
							
							
							前段時間在網路上找的程式碼，修改了一部分用在了專案裡。原部落格地址找不到了，如果原作者看到的話留言我，將於第一時間刪除。

//js本地圖片預覽，相容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3
    function Prev 

  
 

    

    
    
js實現上傳圖片事實預覽
     
 
								
								            
							
							
							html部分



<img alt=""  id="img"  >
<input  type="file" onchange='PreviewImage(this)' >


 

  
 

    

    
    
呼叫微信JS-SDK上傳圖片爬坑之路
     
 
							
							
							最近最用 vue 開發微信服務號 ，也是第一次呼叫微信的sdk ， （ 先吐槽下自己  斷斷續續的整理一個星期才搞出來 ） 日了狗了 ，坑太多  ， 更多是 ios 不相容 ，圖片不顯示呀 ， 不能上傳多張啦  這裡就可以幫你解決 ！ 廢話不多說 直接上程式碼