ajax上传文件预览/七牛云AJAX上传

最新推荐文章于 2024-04-20 18:13:32 发布

weixin_33912453

最新推荐文章于 2024-04-20 18:13:32 发布

阅读量430

点赞数

文章标签： javascript php ui ViewUI

原文链接：https://my.oschina.net/rain21/blog/425565

版权

为什么80%的码农都做不了架构师？>>>

ajaxfileupload下载:链接: http://pan.baidu.com/s/1dDtX6Pb

密码: qqi2

$('.upload-success').show(300).delay(3000).hide(300);  //2S后隐藏

需要用到:ajaxfileupload

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://3.zy62.com/ajaxfileupload.js"></script>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="page-header">ajax上传</h1>

<form id="upload" action="https://api.weixin.qq.com/cgi-bin/media/upload?access_token=mdJiyvzApDgpaBuin0V4JbhdmsGcaPDJvsrOTdL0l8185JvqvW2WIS0EIKCP9ntFXf82fWaJfEWiRdivissAKKcR6pJlM6V66RtjN29rVjA&type=image" method="post" enctype="multipart/form-data">
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" name="media" id="file">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

<a class="btn btn-default" href="#" id="test" role="button">Link</a>
<p>
<img id="img" src=""/>
</p>
<script>
$(document).ready(function(){
	$('#test').click(function(){
		$.ajaxFileUpload({
			  url:'{:U("Index/upload")}',
			  secureuri: false,
			  fileElementId:'file',
			  dataType: 'text',//返回数据类型
			  success: function (data, status){
			      //alert(data);
				  $("#img").attr("src","http://127.0.0.1/6/0604/Uploads/2015-06-06/"+data);
			  },
              error: function (data, status, e)//服务器响应失败处理函数
              {
                  alert(e);
              }
			});
		//$('#upload').submit();
	});
});
</script>
</div>
</body>
</html>

PHP接收文件：

public function upload(){
		$upload = new \Think\Upload();// 实例化上传类
		$upload->maxSize   =     3145728 ;// 设置附件上传大小
		$upload->exts      =     array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
		$upload->rootPath  =     './Uploads/'; // 设置附件上传根目录
		$upload->savePath  =     ''; // 设置附件上传（子）目录
		// 上传文件 
		$info   =   $upload->upload();
		if(!$info) {// 上传错误提示错误信息
			//$this->error($upload->getError());
			echo 456;
		}else{// 上传成功
			echo $info['media']['savename'];
			//print_r($info);
			//$this->success('上传成功！');
		}
	}

效果预览:

判断文件格式和大小:

PHP

$type=$_FILES["file"]["type"];
			$size=$_FILES["file"]["size"]/1024;
			if(!$this->client->id){
				exit('{"state":"1","result":"请登录"}');
			}
			if(!$size){
				exit('{"state":"1","result":"文件不能为空"}');
			}
			if(!$_FILES["file"]["tmp_name"]){
				exit('{"state":"1","result":"文件不能为空"}');
			}
			if(($type!='image/jpeg')&&($type!='image/png')){
				exit('{"state":"1","result":"不允许上传的文件类型"}');
			}
			if($size>=256){
				exit('{"state":"2","result":"不能上传大于256K图片"}');
			}
			if($type=='image/jpeg'){$type='jpg';}
			if($type=='image/png'){$type='png';}
			$_FILES["file"]["name"]=strtolower(md5($this->client->username)).'.'.$type;//.time()
			if(move_uploaded_file($_FILES["file"]["tmp_name"],ROOTWEBDIR."1/userheadimg_files/" . $_FILES["file"]["name"])){
				$client=new Record();
				$client->where("id", "=", $this->client->id)->update("clients", array('avatar'=>$_FILES["file"]["name"]));
				exit('{"state":"3","result":"'.$_FILES["file"]["name"].'"}');
			}else{
				exit('{"state":"4","result":"上传失败"}');
			}
			//"Stored in: " . //ROOTWEBDIR."1/userheadimg_files/" .

JS:

$(document).ready(function(){
    $('#btn_upload').click(function(){
	var f=document.getElementById("file").files;
	//alert(f[0].size); 
	if(f[0].size/1024>256){
	alert('文件大小不能超过256K');
	return false;
	}
	if((f[0].type!='image/jpeg')&&(f[0].type!='image/png')){
	alert('请上传JPG,PNG格式图片');
	return false;
	}
	//alert(f[0].type); 
	//return false;
        $.ajaxFileUpload({
              url:'/client/main/avatar/',
              secureuri: false,
              fileElementId:'file',
              dataType: 'text',//返回数据类型
              success: function (data, status){
				  var data = jQuery.parseJSON(data);
				  if(data.state!=3){
				  alert(data.result);
				  return false;
				  }
				  //alert(data);
                  $(".avatar").attr("src","http://blesta.domain.com/1/userheadimg_files/"+data.result+'?time='+new Date().getTime());
				  return false;
              },
              error: function (data, status, e)//服务器响应失败处理函数
              {
                  alert(e);
				  return false;
              }
            });
			return false;
        //$('#upload').submit();
    });
});

七牛云AJAX上传

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>七牛云存储 | 上传凭证 - jsFiddle demo</title>
  <script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
  <link rel="stylesheet" type="text/css" href="http://fiddle.jshell.net/css/result-light.css">
  <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <script type='text/javascript' src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
  <style type='text/css'>
.ipt{width:300px}label{width:130px;display:block}ul li{list-style:none}.ui-progressbar{position:relative}.progress-label{position:absolute;left:50%;top:4px;font-weight:700;text-shadow:1px 1px 0 #fff}#progressbar{height:30px;display:none}#dialog{display:none}
  </style>
<script type='text/javascript'>
$(document).ready(function() {
    var Qiniu_UploadUrl = "http://up.qiniu.com";
    /*var progressbar = $("#progressbar"),
        progressLabel = $(".progress-label");
    progressbar.progressbar({
        value: false,
        change: function() {
            progressLabel.text(progressbar.progressbar("value") + "%");
        },
        complete: function() {
            progressLabel.text("Complete!");
        }
    });*/
    $("#btn_upload").click(function() {
        //普通上传
        var Qiniu_upload = function(f, token, key) {
            var xhr = new XMLHttpRequest();
            xhr.open('POST', Qiniu_UploadUrl, true);
            var formData, startDate;
            formData = new FormData();
            if (key !== null && key !== undefined) formData.append('key', key);
            formData.append('token', token);
            formData.append('file', f);
            var taking;
            xhr.upload.addEventListener("progress", function(evt) {
                if (evt.lengthComputable) {
                    var nowDate = new Date().getTime();
                    taking = nowDate - startDate;
                    var x = (evt.loaded) / 1024;
                    var y = taking / 1000;
                    var uploadSpeed = (x / y);
                    var formatSpeed;
                    if (uploadSpeed > 1024) {
                        formatSpeed = (uploadSpeed / 1024).toFixed(2) + "Mb\/s";
                    } else {
                        formatSpeed = uploadSpeed.toFixed(2) + "Kb\/s";
                    }
                    //var percentComplete = Math.round(evt.loaded * 100 / evt.total);
                    //progressbar.progressbar("value", percentComplete);
                    // console && console.log(percentComplete, ",", formatSpeed);
                }
            }, false);
 
            xhr.onreadystatechange = function(response) {
                if (xhr.readyState == 4 && xhr.status == 200 && xhr.responseText != "") {
                    var blkRet = JSON.parse(xhr.responseText);
                    //console && console.log(blkRet);
                    //$("#dialog").html(xhr.responseText).dialog();
                    //alert(blkRet.key);
                    //$("#rs").html(blkRet.key);
                    $("#img").attr("src","http://7xjkan.com1.z0.glb.clouddn.com/"+blkRet.key);
                } else if (xhr.status != 200 && xhr.responseText) {
 
                }
            };
            startDate = new Date().getTime();
            $("#progressbar").show();
            xhr.send(formData);
        };
        var token = $("#token").val();
        if ($("#file")[0].files.length > 0 && token != "") {
            Qiniu_upload($("#file")[0].files[0], token, $("#key").val());
        } else {
            console && console.log("form input error");
        }
    })
})
//]]>  
</script>
 
</head>
<body>
<div class="container">
  <ul>
    <li>
        <label for="token">token:</label>
        <input id="token" name="token" class="ipt" value="bk2QllClZeNzs71SQgk-AlUIScXheFJocWqxtTZ4:H7ozOIRGpyotEjgo2UdIvaGBovw=:eyJzY29wZSI6IndzeTEwMCIsImRlYWRsaW5lIjoxNDM1ODI3MTM3fQ==">
    </li>
    <li>
        <label for="key">key:</label>
        <input id="key" name="key" class="ipt" value="">
    </li>
    <li>
        <label for="bucket">照片:</label>
        <input id="file" name="file" class="ipt" type="file" />
    </li>
    <li>
        <input id="btn_upload" type="button" value="提交">
    </li>
    <div id="progressbar"><div class="progress-label"></div></div>
</ul>
<div id="dialog" title="上传成功"></div>
 
<p id="rs"></p>
<img id="img" src="" class="img-responsive"/>
</div>
  <script>
  $(document).ready(function(){
      $('#file').change(function(){
          var key=$(this).val();
          var path1 = key.lastIndexOf("\\");
          var key = key.substring(path1+1);
          $('#key').val(key);
          //alert(key);
      });
  });
  </script>
</body>
</html>

转载于:https://my.oschina.net/rain21/blog/425565