前端开发

网络新概念,云计算、大数据、O2O、电商。。。。

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);


TAG: js php