手机端上传图片（单图）非插件与插件

手机端上传图片

方式一：非插件
HTML

 <form action="" method="post" enctype="multipart/form-data">
  <div class="uploader" style="display: none;z-index: 10;margin-top: 5%;" >
    <div class="browser">
      <label for="file">
        <span>点击选择图片</span>
        <input type="file" name="file" id="fileloader"  accept="image/*"  /></label>
      </label>
      <p></p>
      <img src="资源路径{$image}" class="img-responsive center-block" id="new_img" width="200px;">
    </div> 
  <input type="button"   value="取消上传"    class="btn btn-info btn-primary" onclick="cancle()"  />
  <input type="button" name="submit" value="上传图片" id="fileupload"  class="btn btn-info btn-primary" />
  <p></p>
  </div>
</form> 

CSS

.uploader
{
	/*border: 2px dotted #A5A5C7;*/ 
	border: 1px dotted #A5A5C7; 
	width: 100%;
	color: #92AAB0;
	text-align: center;
	vertical-align: middle;
	padding: 0px 0px;
	margin-bottom: 10px;
	font-size: 200%;
	cursor: default;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.uploader div {
	font-size: 50%;
	font-weight: bold;
	color: #C0C0C0;
	padding: 5px;
}

.uploader div.browser label {
	background-color: #5a7bc2;
	color: white;
	padding: 6px 0px;
	font-size: 100%;
	font-weight: bold;
	cursor: pointer;
	border-radius: 2px;
	position: relative;
	overflow: hidden;
	display: block;
	width: 260px;
	margin: 0px auto 0px auto;

	box-shadow: 2px 2px 2px #888888;
}

.uploader div.browser span {
	cursor: pointer;
}


.uploader div.browser input {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	height: 130px;
	border: solid transparent;
	border-width: 0 0 100px 200px;
	opacity: .0;
	filter: alpha(opacity= 0);
	-o-transform: translate(250px,-50px) scale(1);
	-moz-transform: translate(-300px,0) scale(4);
	direction: ltr;
	cursor: pointer;
}

.uploader div.browser label:hover {
	background-color: #427fed;
}

JS

$(function(){
    $('#fileupload').click(function () {
    //获取上传文件的相关信息，得到的数据是数组格式  
        var formData = new FormData($('form')[0]);
        formData.append('file',$(':file')[0].files[0]);
         $.ajax({
             url: " ",//传向后台服务器文件
             type: 'post',    //传递方法
             data: formData,  //传递的数据
             dataType : 'json',  //传递数据的格式
             async:false, //这是重要的一步，防止重复提交的                   
             cache: false,  //设置为false，上传文件不需要缓存。
             contentType: false,//设置为false,因为是构造的FormData对象,所以这里设置为false。
             processData: false,//设置为false,因为data值是FormData对象，不需要对数据做处理。
             success: function (status) {  
              if (status.status == 1) {
                  alert('上传成功');
                  cancle();
                }else if (status.status == 0) {
                  alert('上传失败');
                } else if (status.status == 4) {
                  alert('请重新选择图片再上传');
                } else if (status.status == 5) {
                  alert('图片不得大于300kb');
                }else if (status.status == 6) {
                  alert('支持的图片类型不正确');
                }
             },
            /* error: function (status) {
                console.log("上传错误！" +status);
                
             },*/
         });

        //阻止继续调用函数
      // return false;
    });
}); 
 <script>
    //在input file内容改变的时候触发事件
    $('#fileloader').change(function(){
    //获取input file的files文件数组;
    //$('#fileloader')获取的是jQuery对象，.get(0)转为原生对象;
    //这边默认只能选一个，但是存放形式仍然是数组，所以取第一个元素使用[0];
      var file = $('#fileloader').get(0).files[0];
    //创建用来读取此文件的对象
      var reader = new FileReader();
    //使用该对象读取file文件
      reader.readAsDataURL(file);
    //读取文件成功后执行的方法函数
      reader.onload=function(e){
    //读取成功后返回的一个参数e，整个的一个进度事件
        //console.log(e);
    //选择所要显示图片的img，要赋值给img的src就是e中target下result里面
    //的base64编码格式的地址
        $('#new_img').get(0).src = e.target.result; //选择图片后形成预览效果
      }
    })
</script>

PHP

public function upload()
{ 
   if ($_FILES["file"]["error"] > 0)
     {
     //echo "错误: " . $_FILES["file"]["error"] . "<br />";
     $status['status'] = '4';
     echo json_encode($status);
     die;
     } 
   if (($_FILES["file"]["size"] / 1024) >= 300) {
       $status['status'] = '5';
       echo json_encode($status);
       die;
   }
   $type = $_FILES['file']['type']; 
   $filetype = ['image/jpg', 'image/jpeg', 'image/gif', 'image/bmp', 'image/png'];
   if (!in_array($type, $filetype)) {
       $status['status'] = '6';
       echo json_encode($status);
       die;
   }

   $date = date("Y_m_d",time()); 
   $dir = "存储路径" . $date ; 
   $new_name = md5('mw_'. $user_id. time()) . '.png'; 
   if (!is_dir($dir)) { 
      mkdir($dir,0777);//权限根据需求给
   }
   $status['status'] = '0';
   if (file_exists($dir . $_FILES["file"]["name"])){
     //echo $_FILES["file"]["name"] . " 文件已经存在. ";
       $status['status'] = '0'; 
   }else{
       move_uploaded_file($_FILES["file"]["tmp_name"],$dir . '/' . $new_name);
       //echo "文件已经被存储到: " . $dir . '/' . $_FILES["file"]["name"];
       $status['status'] = '1'; 
       }
   }
   echo json_encode($status);
}

方式二：插件
插件下载:https://download.csdn.net/download/weixin_41023117/10788554
html

<div id="drop_area"></div>

JS

 var dragImgUpload = new DragImgUpload("#drop_area",{
        callback:function (files) {
            //回调函数，可以传递给后台等等 
            var formData = new FormData();
           formData.append('file',files[0]); 
           $.ajax({
               url: " ",//传向后台服务器文件
               type: 'post',    //传递方法
               data: formData,  //传递的数据
               dataType : 'json',  //传递数据的格式
               async:false, //这是重要的一步，防止重复提交的                   
               cache: false,  //设置为false，上传文件不需要缓存。
               contentType: false,//设置为false,因为是构造的FormData对象,所以这里设置为false。
               processData: false,//设置为false,因为data值是FormData对象，不需要对数据做处理。
               success: function (status) {   
               }, 
           });
         
        }
    })