使用HTML，JS和MONGODB上传和显示图像

我设法使用HTML和JS在我的页面上加载图像，但我似乎无法将图像发布到我的MongoDB，并且它不会显示在我的家中'页面。使用HTML，JS和MONGODB上传和显示图像

HTML：

<div class="container"> 
    <h1 style="text-align: center">Post a New Guitar</h1> 
    <div class="col-md-6"> 
     <form action="/guitars" method="POST"> 
     <div class="input-group"> 
      <label>Item Name</label> 
      <div class="input-group"> 
       <input class="form-control" type="text" name="name" placeholder="Name"> 
      </div> 
      <label>Upload Image</label> 
      <div class="input-group"> 
     <span class="input-group-btn"> 
      <span class="btn btn-default btn-file"> 
       Browse… <input type="file" id="imgInp"> 
      </span> 
     </span> 
     <input type="text" class="form-control" readonly> 
    </div> 
    <img id="img-upload"/> 

     <div class="input-group"> 
      <button class="btn btn-lg btn-primary btn-block">Submit!</button> 
     </div> 

    <a href="/guitars">Go Back</a> 
</div>

JS：

 $(document).ready(function() { 
      $(document).on('change', '.btn-file :file', function() { 
       var input = $(this), 
     label = input.val().replace(/\\/g, '/').replace(/.*\//, ''); 
    input.trigger('fileselect', [label]); 
    }); 

    $('.btn-file :file').on('fileselect', function(event, label) { 

     var input = $(this).parents('.input-group').find(':text'), 
      log = label; 

     if(input.length) { 
      input.val(log); 
     } else { 
      if(log) alert(log); 
     } 

    }); 
    function readURL(input) { 
     if (input.files && input.files[0]) { 
      var reader = new FileReader(); 

      reader.onload = function (e) { 
       $('#img-upload').attr('src', e.target.result); 
      } 

      reader.readAsDataURL(input.files[0]); 
     } 
    } 

    $("#imgInp").change(function(){ 
     readURL(this); 
    });  
});

当提交表单，我希望它显示已使用JS上传的图片，并为它是“拯救”我的数据库。

来源

2017-08-05 Kassie

_“当提交表单，我希望它显示已使用JS上传图片” _哪里是''

你是什么意思“发布图像到MongoDB”？您不应该将图像保存在数据库中。

你想要做的是当你上传图片时，将其存储在服务器的公共访问位置。您在数据库中保存的内容不是图像本身，而是图像在服务器上的位置。

图像存储在服务器： /home/public/image.jpg

映像路径保存在蒙戈DB： { path: '/home/public/image.jpg' }

当你回到你的HTML页面，你只需要查询的路径Mongo DB中的图像并将该值用作图像标记中的源。

`<img src="${path}" />`

来源

2017-08-05 16:52:05

使用HTML，JS和MONGODB上传和显示图像

回答

相关问题