javascript - 微信内多个图片上传问题-PHP中文网问答

我想在微信内上传多个图片并预览，该如何做？
现在微信内只能选择一张我的input是有 multiple="multiple"选项的，但不能选多张图片
一般图片上传是直接点提交还是放在ajax里面？ajax里面支持图片格式么？还是说ajax发送给后端的是一个图片地址url？如果有多张图片，ajax请求是怎样的？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>地址选择</title>
    <link rel="stylesheet" href="//cdn.bootcss.com/weui/1.1.0/style/weui.min.css">
    <link rel="stylesheet" href="//cdn.bootcss.com/jquery-weui/1.0.0/css/jquery-weui.min.css">
    <link href="css/font-awesome.min.css" rel="stylesheet">
</head>
<style>
body{
  background: #ccc;
}

.weui-uploader__input-box>img{
width:100%;
height:100%
}
</style>

<body>
  <p class="weui-cells">
    <!-- <p class="weui-cell__title">报修内容</p> -->
    <p class="weui-cell weui-cell_access">
      <p class="weui-cell__hd">
        <i class="fa icon-suitcase fa-fw"></i>
      </p>
      <p class="weui-cell__bd">
        <p>问题描述</p>
      </p>
      <p class="weui-cell__ft"></p>
    </p>

    <p class="weui-cell weui-cell_accesss">
      <p class="weui-cell__hd">
        <i class="fa icon-suitcase fa-fw"></i>
      </p>
      <p class="weui-cell__bd">
        <p>上传照片</p>
      </p>
      <p class="weui-cell__ft"></p>
    </p>

    <p class="weui-cell weui-cell_access">
      <p class="weui-cell__hd">
        <i class="fa icon-suitcase fa-fw"></i>
      </p>
      <p class="weui-cell__bd">
        <p>选择日期</p>
      </p>
      <p class="weui-cell__ft"></p>
    </p>    
  </p>
  <form action="http://192.168.0.106:3000/">
    <p class="weui-uploader__input-box">
    <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*"  multiple="multiple" onchange="loadFile(event)">
    <!-- <input type="file" accept="image/*" onchange="loadFile(event)"> -->
    <img id="output"  width="40px" height="40px" />
    </p>
    <button type='submit'>提交</button>
  </form>
</body>
<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdn.bootcss.com/jquery-weui/1.0.0/js/jquery-weui.min.js"></script>
<script>
  var loadFile = function(event) {
    var output = document.getElementById('output');
    output.src = URL.createObjectURL(event.target.files[0]);
  //   $.ajax({
  //   url:"http://192.168.0.106:3000",
  //   data:$("input[type='file']").val(), //可以这样写么？但控制台打印出$("input[type='file']").val()只是个文件名啊？
  //   success:function(){
  //     console.log("hhaha")
  //   }
  // })
  };
</script>
</html>

$upload.on("click", function () { $.each(filesObj, function(index, element) { var file = filesObj[index]; console.log(file.name); var data = new FormData(); data.append('file', file); console.log(data); $.ajax({ url:"http://192.168.0.106:3000", data:data success:function(){ console.log("hhaha") } });