WeX5中input拍照上傳圖片方法分享，可單圖與多圖

演示用，比較簡陋，勿怪，方法簡單！
input被點擊以後默認出現拍照，文檔等選項，能夠拍照上傳，也能夠選圖庫文件上傳，也能夠錄像進行視頻上傳，本身對應修改文件類型判斷就能夠了
這些功能無需調用cordova插件

若是須要使用插件拍照上傳，使用java做爲後端的，能夠參考 http://bbs.wex5.com/forum.php...
該方法是把圖片base64編碼成二進制流，能夠存進數據庫，調用的時候解碼顯示
使用php等其餘非java做爲後端的，一樣能夠把圖片base64編碼化，直接像存字符串那樣存進數據庫

1.構建如圖

對應源碼

<div class="x-panel-content" xid="content1">

   <form xid="postForm"  accept="image/jpeg,image/png" enctype="multipart/form-data" target="postResultIframe" class="form-horizontal 

container-fluid" method="post" action="http://127.0.0.1">

        <input type="file" name="photo" xid="uploadfile" bind-change="uploadfileChange"/>

   <button xid="button1" bind-click="button1Click" type="submit">提交</button></form>

那裏面那個action=127.0.0.1那個，改爲本身的請求地址

若是須要多文件上傳，input須要相似這樣構建

<input type='file' name='photo1'>

<input type='file' name='photo2'>

<input type='file' name='photo3'>

或者

<input type='file'  name='photo[]'>

    <input type='file'  name='photo[]'>

   <input type='file'  name='photo[]'>

2.input綁定bind-change="uploadfileChange"
做用是監控input，看註釋很清楚了

Model.prototype.uploadfileChange = function(event) {

if (!event.target.files) { // 若是客戶沒有選擇相關文件，直接返回

               return;

       }

        var uploadimage = $(this.getElementByXid('uploadfile')); // 用jQuery拿到input標籤

         var file = event.target.files[0]; // 拿到用戶選擇的文件

         if (/^image\/\w+$/.test(file.type)) { // 若是是圖片文件

         this.isimg = true;

         } else { // 若是用戶選的的不是圖片文件

         justep.Util.hint('請選擇圖片文件！');

$uploadimage.val('');

}

};

3.上主菜
個人後端使用php作的，使用其餘後端的，自行找一個對應的上傳類對接就能夠了

Model.prototype.button1Click = function(event) {

                var form = this.getElementByXid("postForm"); // 拿到form表單的js對象

                var acturl = "http://127.0.0.1/index.php/home/index/uploadcar";

                form.attributes["action"].value = require.toUrl(acturl);

                // 提交表單

                $(form).submit(function() {

                        $(this).ajaxSubmit(function(resultJson) {

                                alert(resultJson);

                        });
                       return false; // 阻止表單默認提交

               });

};

1. require("./baasd/jquery.form"); 路徑改爲本身的
   http://pan.baidu.com/s/1eSgDluE

5.加上後端吧，thinkphp 3.2的

public function uploadcar() {

$upload = new \Think\Upload(); //  實例化上傳類

$upload->maxSize = 1024 * 1000 * 10; //  設置附件上傳大小

$upload->exts = array('jpg', 'gif', 'png', 'jpeg'); //  設置附件上傳類型

$upload->rootPath = './upload/img_zj/'; //證件目錄

$upload->savePath = ''; //  設置附件上傳目錄

$upload->autoSub = true;

$upload->subName = array('date', 'Y/m/d');

$upload->saveRule = date("YmdHis", time()) . "_" . mt_rand(1000, 9999); //上傳名已時間戳保存

//  上傳文件

$info = $upload->upload();

if (!$info) {

    //上傳失敗

    //  上傳錯誤提示錯誤信息

    $this->error($upload->getError());

} else {

   //上傳成功

    $imgpath = '/upload/img_zj/' . $info['photo']['savepath'] . $info['photo']['savename'];

    echo $imgpath;

}

}

我這裏直接返回的就是圖片地址，你能夠把3裏面直接改造，相似我這樣寫法

var xszimg = this.getElementByXid("xszimg");

$(form).submit(function() {

                                $(this).ajaxSubmit(function(resultJson) {

                                        $(xszimg).attr("src", transURL(resultJson));

                                        $(xszimg).show();

                                });

                                return false; // 阻止表單默認提交

                       });

這樣直接就把圖片顯示出來了