原生js文件上传，input如何实现文件（图片）上传与预览

效果

说明

• 首先文件上传得需要后台支持，我这里用的node写的后端服务，篇幅有限，这里就不贴后端代码了，有需要的留言联系

dom部分

• 由于form表单自动关联input文件上传按钮，故点击上传文件按钮时会自动往 action 路径提交文件

  	<h3>文件上传：</h3>
      选择一个文件上传: <br />
      <form action="http://localhost:8090/upToImg1" method="post" enctype="multipart/form-data" id="formData2">
          名字 <input type="text" name="name"></input>
          <br />
          描述 <input type="text" name="content"></input>
          <br />
          <input type="file" name="image" size="50" onchange="fileChange(this)" />
          <br />
          <input type="submit" value="上传文件" id="submitButton" />
      </form>
      <button id="mybutton">获取</button>
      <ul id="myul"></ul>
  

js部分

• 如果需要手动点击按钮上传，只需对其进行点击事件并禁止默认行为即可

• 我这里用 jquery 做的请求，如果项目需要，请求时 需要携带其它参数 ，比如像我上面的名字和描述数据，可以把需要传递的数据用input框传递进去

• 如果想对文件做限制，可根据onchange事件处理，函数返回false或promise的reject失败，即会阻止submit提交

  	var submitButton = document.getElementById('submitButton');
      var myul = document.getElementById('myul');
      var mybutton = document.getElementById('mybutton');
      submitButton.onclick = function (e) {
          if (e.preventDefault) e.preventDefault();
          else e.returnValue = false;
          var formData = new FormData($("#formData2")[0]);
          $.ajax({
              url: 'http://localhost:8090/upToImg1',
              type: 'POST',
              data: formData,
              async: false,
              cache: false,
              contentType: false,
              processData: false,
              success: function (returndata) {
                  console.log(returndata);
              },
              error: function (returndata) {
                  console.log(returndata);
              }
          });
      }
  
      function fileChange(target) {
          var fileSize = 0;
          fileSize = target.files[0].size;
          var size = fileSize / 1024;
          if (size > 1000) {
              alert("附件不能大于1M");
              target.value = "";
              return false;   //阻止submit提交
          }
          var name = target.value;
          var fileName = name.substring(name.lastIndexOf(".") + 1).toLowerCase();
          if (fileName != "jpg" && fileName != "jpeg" && fileName != "png" && fileName != "gif") {
              alert("请选择图片格式文件上传(jpg,png,gif,gif等)！");
              target.value = "";
              return false;   //阻止submit提交
          }
      }
      mybutton.onclick = function () {
          $.ajax({
              url: 'http://localhost:8090/upToImg1',
              type: 'get',
              success: function (returndata) {
                  console.log(returndata);
                  var str='';
                  returndata.data.forEach(ele => {
                      str+=`<li><img src="http://localhost:8090/upload/${ele.src}" alt="${ele.content}">${ele.name}</li>`
                  });
                  $("#myul").append(str)
              },
              error: function (returndata) {
                  console.log(returndata);
              }
          });
      }
  

• 上传成功后对相应数据做需要操作即可，我这里上传成功后通过点击获取按钮得到上传文件的列表，并通过 字符串拼接 的方式动态添加图片到 ul 上

注意

由于图片是在服务端存储，返回的图片只是图片的文件名，要想通过 img 标签展示图片，需拼接正确路径以匹配到后端存储代码