我希望能够在上传之前预览文件(图像).预览操作应该在浏览器中全部执行,而不使用Ajax上传图像.
我怎样才能做到这一点？
我想以<input type="file">编程方式在标记上触发click事件.
只是调用click()似乎没有做任何事情,或者至少它没有弹出文件选择对话框.
我一直在尝试使用侦听器捕获事件并重定向事件,但是我无法像点击某个人那样实际执行事件.
可能重复:
Jquery触发器文件输入
我正在制作一个允许用户将图像上传到网站的表单.到目前为止,我已经在Chrome和Safari中使用了拖放解决方案.但是,我还需要支持用户单击按钮并以传统方式浏览文件的操作.
与此相似:
<input type="file" name="my_file">
然而,我宁愿使用这样的东西,而不是使用笨重的文件描述区域和不可编辑的浏览按钮:
<input type="button" id="get_file">
因此,我的问题是如何让这个按钮打开一个文件选择窗口并按照相同的方式处理选择type="file"？
干杯.
我的解决方案
HTML:
<input type="button" id="my-button" value="Select Files">
<input type="file" name="my_file" id="my-file">
CSS:
#my-file { visibility: hidden; }
jQuery的:
$('#my-button').click(function(){
$('#my-file').click();
});
到目前为止在Chrome,Firefox和IE7 +中工作(尚未尝试过IE6).
好的,我有一个类型为file和id"test"的输入元素
当我放入地址栏时:javascript:document.getElementById("test").单击()它会打开打开文件对话框,以便用户决定要上传的内容.但是,如果将相同的确切行插入到文档中或在chrome控制台中完成,则不会显示打开的文件对话框.事实上,控制台说click()函数是未定义的.有没有办法在铬做这个？
因为它似乎适用于任何其他浏览器
我有这个标记
<div id="wrapper">
<input type="file" id="file" accept="image/*" capture="camera">
<a href="#" id="capture">Submit Cleanup</a>
</div>
和jQuery如下
jQuery(function($){
$('#capture').on('click', function(e){
e.preventDefault();
$('#file').trigger('click');
});
});
该脚本在PC浏览器上按预期工作,但当我尝试移动设备时,相机不会提示.我也尝试过使用click(),但结果相同.
可能是什么问题呢？
我们希望减少用户在我们网站上传文件所需的步骤数; 所以我们使用jQuery使用下面的标记打开和回发文件(简化):
<a onclick="$('#uplRegistrationImage').click();">
Change profile picture
</a>
<!-- Hidden to keep the UI clean -->
<asp:FileUpload ID="uplRegistrationImage"
runat="server"
ClientIDMode="static"
Style="display:none"
onchange="$('#btnSubmitImage').click();" />
<asp:Button runat="server"
ID="btnSubmitImage"
ClientIDMode="static"
Style="display:none"
OnClick="btnSubmitImage_OnClick"
UseSubmitBehavior="False" />
这在Firefox和Chrome中运行得非常好; 单击链接时打开文件对话框,并在选择文件时触发回发.
但是在文件上传加载并且用户选择了文件后的IE9中; 在OnChange工作的内容我得到"SCRIPT5访问被拒绝"错误.我已经尝试设置任意超时,设置间隔以检查文件是否无效.
还有其他一些与此有关的问题; 但是没有一个看起来有一个像样的答案(有人说将文件对话框设置为透明并悬停在按钮后面!)
有没有人解决这个问题？或者我是否必须为IE用户提供按钮？
我正在玩JavaScript并编写简单的函数来创建INPUTelement(type="file")并模拟点击.
var createAndCallFileSelect = function () {
var input = document.createElement ("input");
input.setAttribute ("type", "file");
input.addEventListener ("change", function () {
console.log (this.files);
}, false);
input.click();
}
它大部分时间都很有效,但有时它不会onChange在选择文件时触发事件(或者在使用multiple属性时使用更多文件INPUT).
我知道onChange当你重新选择同一个文件时不会触发,但很明显这不是这里的情况.它仅在我第一次使用此功能时才触发事件,有时仅触发.onChange如果从对话框中选择了某些内容,则每次下一次点击通
已经尝试在这里和周围寻找这个问题,但似乎所有onChange问题和解决方案都与重新选择相同文件的着名问题有关.
我发现这种情况发生在最新的Opera和Firefox上,从未在其他浏览器上测试过.也.我试图等待整个页面加载,但结果仍然相同 - 有时它不会onChange在第一次调用时触发.
任何人都可以向我解释为什么会这样吗？我已经有了解决方法代码,这不是问题,只需要解释为什么在创建INPUT并以这种方式调用时会发生这种情况.
级联延迟
var function createAndCallFileSelect = function () {
var input = document.createElement ("input");
setTimeout (function () { // set type with 1s delay
input.setAttribute ("type", "file"); …上传功能在Chrome中运行得非常好,但它无法在IE 11上运行.
我正在尝试使用以下dom元素实现上载功能:
<input type="file" id="file-upload" class="hidden-inputs"/>
我在用户点击其他内容时触发了点击,输入本身就被隐藏了.这是代码:
$("#file-upload").click();//triggering click
input.change(function(){//when file is selected
var file = this.files[0];
api.File.upload(path, file, function(err){//upload to server
//do something in callback
});
});
当我尝试调试代码时,添加一个断点表明它不会进入更改时调用的函数.这只发生在我上传一段时间的第一次尝试,如果我不断尝试上传SAME文件.但是,如果我尝试上传文件一次(不起作用),那么我选择一个差异文件,它完美地运行.如果我触发上传功能会发生同样的事情,但是第一次没有选择项目,我点击取消,然后我再次尝试上传,这次选择一个文件,它将完美地工作.on change事件被触发,所以这不是问题.任何想法可能导致这种行为,只在IE？我很感激帮助!
编辑:此外,如果它有帮助.当多次重复失败的上载,然后在另一个文件上选择上载时,它将执行上次尝试它的次数.
我有div哪一个点击触发输入文件.在其他浏览器(Chrome,Firefox,IE)中,它可以正常工作,但在Safari(5.1.7)中却没有.知道为什么吗？
$(function() {
$("#mask-button-file").click(function () {
$("#mask-load-file").trigger('click');
});
});
<div id="mask-button-file" class="hover active">
. . .
</div>
<input type="file" id="mask-load-file" name="file1" >
#mask-load-file{
display:none;
opacity:0;
}
#mask-button-file{
width:81px;
height: 40px;
background-color: #f70808;
float:left;
text-align: center;
vertical-align: middle;
line-height: 40px;
margin-left:1px;
cursor:pointer;
}
#mask-button-file:active{
background-color:#DF0005;
}
我正在设计的网站有这个小问题。已经结束了，但我认为 jQuery 是这里的问题。
代码如下：
<img src="files/register_page/upload_photo/body.png" id="upload">
<input type="file" name="file_upload" id="file_upload" style="visibility:hidden;">
jQuery 如下，在文档的一部分：
$(document).ready( function(){
$("#upload").click( function(){
$('#file_upload').click();
});
});
但是，单击 img 后，没有任何反应，应该弹出文件上传对话框。请，如果您需要更多信息或其他东西，请告诉我。如果没有，这里可能有什么问题？我正在使用 jQuery 1.8.0。
我正在尝试使用此引用在我的网站上重新设置(eclipse)fileupload元素.当我把fileupload元素放在我的新替代图像下面时(按照前面提到的教程的指示),一切都很好,结果很有希望.现在,我想将fileinput元素放在其他位置,并将图像上的单击函数绑定到单击fileinput元素以触发文件浏览器对话框.
唉通常$('input:file').click()或 $('input:file').trigger('click')不工作.
我也对发布文件对话框的其他方法感兴趣,没有文件上传元素(它仅用于javascript处理,不上传到服务器).
哦,它不需要在任何版本的IE上工作.