前端开发
网络新概念,云计算、大数据、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);