Question

以下是我的代码段，所以下面的内容是，当我点击文本为＆＃34的按钮时，浏览附件＆＃34;然后将触发输入文件，然后在选择文件（图像）之后，它将被渲染到ID为＆＃34; image_container＆＃34;的图像标签。然后，如果单击文本为＆＃34;重置＆＃34;之前的图像URL将被恢复到图像容器（#image_container）。变量save_src将保存前一个图像源，save_pic变量将保存先前的浏览文件链接，因此当用户单击＆＃34;重置＆＃34;时，save_src将被放回图像容器src然后save_pic将被放回输入文件。

恢复图像src正在工作（它恢复上一个图像），但遗憾的是恢复了以前的浏览文件，遗憾的是没有工作，它抛出了我的错误

＆＃34;未捕获的InvalidStateError：无法设置＆＃39;值＆＃39;财产＆＃39; HTMLInputElement＆＃39;：此输入元素接受可能的文件名只能以编程方式设置为空字符串。＆＃34;

任何想法，帮助？

PS：这是一个ajax上传图片，所以我带来了一些方便的上传风格。

＆＃13;

var save_src, save_pic;
$(document).ready(function(){ 
  $("#reset_button").click(function(){
       $("#employee_image_sidebar").prop("src", save_src);
       $("#browse_file").val(save_pic);
    });
  
  $("#browse_file").change(function(){
        if($(this).val() !== ""){
            save_src = $("#image_container").attr("src");
            save_pic = $("#browse_file").val();
          
            var reader = new FileReader();
            reader.onloadend = function() {
              $("#image_container").prop("src", reader.result);
            }

            if (this.files && this.files[0]) {
              reader.readAsDataURL(this.files[0]);
            } else {
              $("#image_container").prop("src", "");
            }

            
        }
    });
  $("#browse_button").click(function(){
       $("#browse_file").trigger("click"); 
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<img src="data:image/jpg;base64,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" id="image_container"/>
<button id="browse_button">Browse for attachment</button>
<button id="reset_button">Reset</button>
<input type="file" id="browse_file" style="display: none;"/>

＆＃13;

Answer 1

由于安全限制，您无法做到的事情。错误信息非常明显;除了清除它之外，没有办法以编程方式设置<input type="file">元素的值。只允许浏览器用户使用浏览器的文件选择器对话框进行更改。删除违规行，一切都会好的：

$("#browse_file").val(save_pic); // XXX DELETE THIS

将浏览的附件链接恢复到文件输入

1 个答案: