手机端图片上传

(一)css样式

<style type="text/css">

     body,html,section {padding:0;margin:0;}

    .up_phone{ background: #fff;padding: 15px 10px;margin-top:10px;border:10px solid #f3f3f3;}

 .up_phone span input[type="file"]{width:85px; height:30px; opacity:0;filter: alpha(opacity=0); text-align: center;    position: absolute;left: 0;top: 0;}

 .up_phone span { display: inline-block;  text-align: center;height: 30px;  line-height: 30px; padding: 0 10px; background: #FF65AF;border-radius: 13px;margin-top:20px; color: #fff;  position: relative;}

.up_phone .big_pic{ max-width: 430px; margin-top:10px; position: relative;}

.up_phone .big_pic img{ width: 100%;}

/*.yuyue_info  textarea{ width: 100%; border: none; height:120px;line-height: 1.6em;font-size: 1.1em;color: #666; }*/

.yuyue_info .yangli{ padding: 10px;}

em.icon_clock{ display:block; width:32px; height:32px; background: url(all1.png) no-repeat; position: absolute; z-index: 1;top:-13px; right: -5px;background-size: 138px;}

.pj_boxs .big_pic em.icon_clock{width:20px; height:20px; background-size: 84px;top:0;right: 0px;}

.tijiao_bnt{/*width:100%;position: fixed;left: 0;bottom: 0; */background:#ff65af; margin:1em 10px 0; border-radius:5px;}

.tijiao_bnt input{ display: block; width:100%; height: 45px;  line-height: 45px; background:none; text-align: center; color: #fff; font-family:"微软雅黑";  font-size:1em;border: 0;-webkit-appearance: none;}

    </style>

(二)html代码部分

<section id="form_block">

<form id="form">

   <div class="up_phone">

                上传照片

                <p>

                    <span>

                        上传图片

                        <input type="file" id="file2">

                    </span>

                </p>

            </div>

   <div class="tijiao_bnt" style="display:none;"><input type="submit" value="提交" onclick="changeSubmit();"></div>

</form>

</section>

<!--提示框-->

<div class="bg" style="display: none;"></div>

<div class="tishi_box" style="display: none;">

    <a href="javascript:;" onclick="javascript:closeWarning()" target="_self" class="close">关闭</a>

    <div class="clear"></div>

    <p rel="warning_txt"></p>

</div>

<!--提示框-->

(三)引入js库

 <script type="text/javascript" src="./jquery.js"></script>

<script type="text/javascript" src="exif.js"></script>

<script type="text/javascript" src="MegaPixImage.js"></script>

(四)js代码部分

<script type="text/javascript">

//信息提示框

function showWarning(str){

  jQuery("p[rel='warning_txt']").html(str);

  jQuery(".tishi_box").show();

  jQuery(".bg").show();

}

//上传图片

$("#file2").change(function() {

    if (!this.files.length) return;

    if (!/image\/\w+/.test(this.files[0].type)) {

showWarning("图片格式不正确，请选择正确格式的图片文件！");

return false;

    } else {

var Orientation;

var fileReader = new FileReader();

fileReader.onprogress = function(e) {

   // console.log((e.loaded / e.total * 100).toFixed() + "%");

};

fileReader.readAsDataURL(this.files[0]); // 读取文件内容

EXIF.getData(this.files[0], function() { 

   EXIF.getAllTags(this);

   Orientation = EXIF.getTag(this, 'Orientation');

}); 

fileReader.onload = function(e) {

   var image = new Image();  

   image.src = e.target.result;

   image.onload = function() {

var pWidth = 400;

var pHeight = 0;

if(this.naturalWidth > pWidth) {

   pHeight = this.naturalHeight * (pWidth /this.naturalWidth);

}else{

   pWidth = this.naturalWidth;

   pHeight = this.naturalHeight;

}

var canvas = document.createElement("canvas");

var ctx = canvas.getContext("2d");

var mpImg = new MegaPixImage(this);  

mpImg.render(canvas, {  

   width: pWidth,  

   height: pHeight,  

   quality: 1,  

   orientation: Orientation  

});

// canvas.width = pWidth;

// canvas.height = pHeight;

// ctx.drawImage(this, 0, 0, pWidth,pHeight);

var image64 = canvas.toDataURL("image/jpeg");

if ($('.big_pic').length>=3) {

   showWarning('最多传三张图片');

}else{

   var big_pic = '<p class="big_pic">';

big_pic += '<img src="'+image64+'">';

big_pic += '<em class="icon_clock" onclick="removeImg(this);"></em>';

big_pic += '<input type="hidden" name="desc_pic" value="'+image64+'">';

   big_pic += '</p>';

   $('.up_phone').append(big_pic);

   if ($('.big_pic').length>=3) {

      $('.up_phone p:eq(0)').hide();

   };

}

   }

};

fileReader.onerror = function(e) {

   showWarning("图片加载失败");

};

    }

});

//图片移除

function removeImg(obj){

    $(obj).parent().remove();

    $('.up_phone p:eq(0)').show();

}

</script>

(五)php代码部分

<?php

//上传图片

$imageTools = \Yin::load_sys_class('Image');

if (isset($_POST['desc_pic'])) {

    $desc_pic = explode('|,|', $_POST['desc_pic']);

    $data['desc_pic'] = '';

    foreach ($desc_pic as $k => $v) {

if (strstr($v, 'group1/')===false) {

   $imgpath = $this->up_img($v);

   $picPath = $imageTools->uploadByFilename($imgpath);

   $imgpath = $picPath['group_name'].'/'.$picPath['filename'];

   $data['desc_pic'] .= ','.$imgpath;

}else{

   $data['desc_pic'] .= ','.$v;

}

    }

    $data['desc_pic'] = ltrim($data['desc_pic'] ,',');

}

?>