前端开发
网络新概念,云计算、大数据、O2O、电商。。。。
网络新概念,云计算、大数据、O2O、电商。。。。
2018-07-19 09:38:16
1、html内容:
<div class="form-group"> <label for="uploadFile" style="float:left;">上传截图:</label> <input name="uploadFile" type="file" id="uploadFile" style="float:left;" /> <input type="button" id="btnUpload" value="上传文件" onclick="uploadImage()" class="btn-info" /> </div> <div class="form-group"> <label for="TextFilename">成功文件:</label> <input name="TextBoxPicname" type="text" readonly="readonly" id="TextBoxPicname" class="form-control" /> </div>
2、js代码:
<script> function uploadImage(){ //获取图片 var file = $('#uploadFile')[0].files[0]; //设置传参 var formdata = new FormData(); //获取文件放到formdata formdata.append("file",file); formdata.append("p2",'123456789'); $.ajax({ url : "uploadpic.php", type: 'post', dataType: 'json', // json:'callback',(因为php设置了header跨域,并不需要用这两个参数,设置了反而影响返回) data: formdata, processData: false, contentType: false, cache: false, success:function(res){ console.log(res); if(res['code']==0) $("#TextFilename").val(res['data'].src); else alert(res['msg']); },error:function(res){ alert('系统错误'); } }) } </script>
3、后台php接收代码
header('content-type:application/json;charset=utf8'); header("Access-Control-Allow-Origin:*"); header("Access-Control-Allow-Methods:GET,POST"); $arr = array(); $arr['code']='-1'; $arr['msg']='上传失败'; $arr['data']=null; if ((($_FILES["file"]["type"] == "image/gif") || ($_FILES["file"]["type"] == "image/png") || ($_FILES["file"]["type"] == "image/jpeg") || ($_FILES["file"]["type"] == "image/pjpeg")) && ($_FILES["file"]["size"] < 40000)) { if ($_FILES["file"]["error"] > 0) { $arr['msg']='上传失败Code: ' . $_FILES["file"]["error"] ; } else { //echo "Upload: " . $_FILES["file"]["name"] . "<br />"; //echo "Type: " . $_FILES["file"]["type"] . "<br />"; //echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />"; //echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br />"; $filename=$_FILES["file"]["name"]; $fileext=substr(strrchr($_FILES["file"]["name"], '.'), 1); $filenamenew=date("YmdHis").'.'.$fileext; move_uploaded_file($_FILES["file"]["tmp_name"],"upload/".$filenamenew); $arr['code']='0'; $arr['msg']='上传成功'; $arr['data']['src']=$filenamenew; } } else { $arr['msg']='上传失败,无效的文件,只能上传小于4兆的gif、jpg、png图片'; } echo json_encode($arr);