使用jQuery和PHP实现简单的图片上传功能
要使用jQuery和PHP实现简单的图片上传功能,首先需要创建一个HTML表单,包含一个文件输入框和一个提交按钮。然后,使用jQuery监听表单的提交事件,阻止默认行为,并通过AJAX将文件发送到服务器。在PHP端,接收文件并将其保存到指定的目录。最后,根据操作结果返回相应的提示信息。以下是一个简单的示例: HTML代码: ```html
``` jQuery代码: ```javascript $("#uploadForm").on("submit", function(e) { e.preventDefault(); var formData = new FormData(this); $.ajax({ url: "upload.php", type: "POST", data图片上传思路:通过AJAX实现图片上传,然后把PHP返回的图片地址,加入到隐藏字段中,最后通过表单提交给后台PHP,代码如下
HTML代码 zimg.html文件:
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>自定义上传图片</title></head><body><formaction="a.php?action=2"method="post"><span>上传图片</span><span><inputtype="file"id="img_url"name="img_url"accept=".jpg,.gif,.jpeg,.bmp,.png"/><aonclick="UpLoadImg()">上传</a><inputtype="hidden"id="url_data"name="url_data"/></span><br><span><inputtype="submit"value="提交"></span></form></body><!--引入jq--><scriptsrc="https://code.jquery.com/jquery-3.0.0.min.js"></script><script>functionUpLoadImg(){//获取上传文件varformData=newFormData();formData.append('img_url',$('#img_url')[0].files[0]);console.log(formData)//提交后台处理$.ajax({url:'a.php?action=1',type:'POST',cache:false,data:formData,dataType:"JSON",processData:false,contentType:false}).done(function(res){console.log(res.url);if(res.status==1){//赋值给字段$('#url_data').val(res.url);alert(res.msg)}else{alert(res.msg)}}).fail(function(res){});}</script></html>
后台php代码 a.php:
<?phpif($_GET['action']==1){//上传图片接口$img=$_FILES['img_url'];//获取上图片后缀$type=strstr($img['name'],'.');$rand=rand(1000,9999);//命名图片名称$pics=date("YmdHis").$rand.$type;//上传路径$pic_path="img/".$pics;//移动到指定目录,上传图片$res=move_uploaded_file($img['tmp_name'],$pic_path);if($res){echojson_encode(['status'=>1,'msg'=>'上传成功','url'=>$pic_path]);exit;}else{echojson_encode(['status'=>0,'msg'=>'上传失败']);exit;}}elseif($_GET['action']==2){//提交文件表单echo'<pre>';var_dump($_POST);}