文件上传jquery而不是预览文件，它显示在下面的新窗口的链接

File upload jquery instead of preview the file it show the link in the below new window

本文关键字：文件 新窗口 在下面 链接 窗口 显示 jquery      更新时间：2023-09-26

工作在Jquery文件上传我不想使用任何插件。使用纯Jquery/javascript。而不是预览文件，我想要的链接(视图)需要显示一旦图像&PDF上传，如果用户点击链接，它必须在新页面中打开。

这是我的HTML代码

这里有什么指导吗

<div class="mob_pass">
    <label class="ctm_fnt">Attach document</label>
    <br>
    <div class="custom-file-input">
        <input type="file">
        <input type="text" class="txt_field ctm_widt" placeholder="Attached File">
        <button class="cst_select">
            <i class="fa  fa-rotate-90"></i> Attach
        </button>
    </div>
</div>

请帮帮我。

Thanks In advance

这里是小提琴链接

添加到您的标记:

<a href="#" target="_blank" class="preview">View</a>

在JS中，捕获输入更改的事件，获得预览并将a的href设置为您获得的数据URL。

最初隐藏a(当没有选择文件时)，并在有东西要显示时再次显示。

var $preview = $(".preview");
$preview.hide();
$("input").on("change", function(){
  var files = this.files;
  var fileReader = new FileReader();
  fileReader.onload = function(e){
    $preview.attr("href", e.target.result);
    $preview.show();
  };
  fileReader.readAsDataURL(files[0]);
});

JSBin: http://jsbin.com/duziwukuro/edit?html,js,output

相关文章：