通知:即日起,注册新用户赠送 5 积分, 5 积分可提交 1 个网站或文章、公众号、小程序,同时( 每日签到 可免费获取积分或通过 在线充值 获取积分);

点击这里在线咨询客服 官方QQ群
新站提交

一、下面先给出代码,然后再来解释说明:

一定要记得设置跨域请求中的权限问题哦,不会的可以看另一篇文章:

文章:AJAX跨域请求,jquery ajax跨域报500,解决ajax跨域的解决办法!


前端html(域1):

<input id="appImgs" name="image" type="file" accept="image/*">
 
<select name="catid">
  <option value="1">生活照</option>
  <option value="2">游玩照</option>
  <option value="3">风景照</option>
</select>
 
<input type="text" name="des">
 
<button onclick="uploads();">确认上传</button>

AJAX部分(域1):.

<script>
function uploads(param){
  var oFiles = document.querySelector("#appImgs").files;
  // 组装数据(文件数据,普通数据)
  var formData = new FormData();
  formData.append('image',    oFiles[0]);
  formData.append('des'  ,    $("input[name='des']").val());
  formData.append('catid',    $("select[name='catid']").val());
 
  $.ajax({
      type: 'POST',
      url: '请求地址',
      data: formData,
      cache: false,  
      contentType: false,  
      processData: false, 
      success: function(obj) {
          var data = eval("("+obj+")");
          if(data.code==1){
              alert('上传成功');
          }else{
              alert('上传失败');
          } 
      },
      error:function(e){
          alert('error');
      }
  });
}
</script>

PHP部分(域2):

// 普通数据接收
$data = [
    'des'    => $_POST['des'],
    'catid'  => $_POST['catid']
];
 
//图片接收上传
if(!empty($_FILES['image'])){
    $img = config('image')['image'].get_uniqid();
    $data['image'] = $img.'.'.pathinfo($_FILES['image']['name'])['extension'];
    if(!copy ( $_FILES['image']['tmp_name'] ,$data['image'] )) json(0, '图片上传失败');
}else{
    json(0, '请选择图片上传');
}
 
// 其他逻辑代码 
 
json(1, '图片上传成功');

【注意:】

按照上面的是请求不了,上传不了图片的哦。


标签: jQuery PHP ajax
分享到:
打赏
互助联盟

互助联盟

这家伙很懒,什么都没写呢~

评论
暂时还没有收到评论,赶紧来抢沙发吧~
  • 10586

    网站

  • 3383

    文章

  • 17

    小程序

  • 12

    公众号

  • 527

    会员

注册一个账号,开始推广你的网站。
最新添加网站
最新入驻小程序
星光小副业

星光小副业2022-08-29

随时随地搞点小兼职

小优资源整合

小优资源整合2022-08-26

小优资源整合|分享更多优质免费资源

好孕知识宝典

好孕知识宝典2022-08-18

AI宝宝长相预测,了解更多怀孕知识,告别玻璃心

京东云小店

京东云小店2022-03-17

云小店是一款社交电商的应用产品,由京东集团旗下的全平台云计算综合服务提供商京东云推出,

简书

简书2022-03-11

简书微信小程序版,提供了一个便捷的内容创作平台,在这里可以阅读到更多精彩的原创内容,增