PHP上传图片+FileReader读取blob路径

html前端：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

<title>上传图片</title>

<script type="text/javascript">

$(document).ready(function() {

var src ='';

var img ='';

var flag = 0;

$(".btn-save").click(function() {

if (flag == 0) {

     $("input[name='img']").val(img);

$.ajax({

type: 'post',

url: "{:U('Public/add')}",

dataType: "json",

data: $("form").serialize(),

success: function(data) {

if (data.code == 1)

flag = 1;

layer.msg(data.msg);

}

});

}

else

layer.msg("请勿重复提交");

});

$("#uploaderInput").on("change",function(e) {

var tmpl = '<li class="weui-uploader__file" style="background-image:url(#url#)"></li>';

var url = window.URL || window.webkitURL || window.mozURL, files = e.target.files;

        for (var i = 0, len = files.length; i < len; ++i) {

            var file = files[i];

            if (url) {

                src = url.createObjectURL(file);

            } else {

                src = e.target.result;

            }

            $("#uploaderFiles").html($(tmpl.replace('#url#', src)));

    if(window.FileReader) {

    var reader = new FileReader();

    reader.readAsDataURL(file);

    reader.onload = function(e){

  $.ajax({

  type: 'post',

  url: "{:U('Public/upload')}",

  dataType: "json",

  data: "img=" + e.target.result,

  success: function(data) {

  img = data.msg;

  }

     });

   }

     }

    else {

      alert("Not supported by your browser!");

 }

        }

})

});

</script>

</head>

<body>

<div class="wrapper">

  <div class="tabbar js_show scroller">

    <div class="page__bd">

         <form action="" method="post" name="myform"  enctype="multipart/form-data">

         <input type="hidden" name="img" value="">

         <div class="weui-cells weui-cells_form">

            <div class="weui-cell">

                <div class="weui-cell__hd"><label class="weui-label">上传图片</label></div>

                <div class="weui-cell__bd">

                     <ul id="uploaderFiles" class="weui-uploader__files"></ul>

                    <div class="weui-uploader__input-box">

                                <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple="">

                    </div>

                </div>

            </div>            

            <div class="weui-cell"></div>

            <div class="weui-btn-area"><a class="weui-btn weui-btn_primary btn-save" href="javascript:void(0)" id="showTooltips"> 提 交 </a></div>

         </div>   

         </form>  

    </div>

  </div>

</div>

</body>

</html>

php后端：

function upload() {

$img = $_POST ['img'];

list ( $type, $data ) = explode ( ',', $img );

if (strstr ( $type, 'image/jpeg' ) !== '') {

$ext = '.jpg';

} elseif (strstr ( $type, 'image/gif' ) !== '') {

$ext = '.gif';

} elseif (strstr ( $type, 'image/png' ) !== '') {

$ext = '.png';

}

$dirname = date ( 'Ymd' );

if (! is_dir ( WEB_ROOT . '/../attached/' . $dirname )) {

mkdir ( WEB_ROOT . '/../attached/' . $dirname );

}

$filename = $dirname . '/' . time () . rand ( 000, 999 ) . $ext;

$data = str_replace ( ' ', '+', $data );

$res = file_put_contents ( WEB_ROOT . '/../attached/' . $filename, base64_decode ( $data, true ) );

echo json_encode ( array ('code' => 0,'msg' => $filename ) );

}