允许用户在没有提交按钮的情况下在 x 文件夹 chrome 扩展名上上传图像

Question

我想允许用户在 chrome 扩展示例文件夹名称（上传）上上传图像并且没有提交按钮

<form action="/upload">
  <input type="file" name="myimages" accept="image/*">
</form>

显示图片

<span class="AvGbtn" id="AvBgIds" style="background-image: url(Here i want to show upload images url
); background-size: 100% 100%;" oncontextmenu="return false">  
</span>

Answer 1

$( document ).ready(function() {
    $( '#myimages' ).change(function() {
      var filename = $('input[type=file]').val().replace(/C:\fakepath\/i, '');
      $( '#myform' ).submit();
      $( '#uploaded').append('<img src="/upload/' + filename + '"/>');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myform" action="/upload">
  <input type="file" name="myimages" id="myimages" accept="image/*">
</form>
<div id="uploaded">
</div>

使用文件上传字段的onchange事件提交表单。

编辑：

添加了在表单下方 div 中显示上传图片的功能。

致谢：Use jQuery to get the file input's selected filename without the path

允许用户在没有提交按钮的情况下在 x 文件夹 chrome 扩展名上上传图像

Allow user to upload images on x folder chrome extension without submit button

html

javascript

jquery

firefox-addon

google-chrome-extension