我在剧本中遇到问题:
new
我希望点击$('.box').click(function () {$("input[type='image']").click(); });
元素从用户pc上传图像文件。
当我使用"括号"编写我的代码,它也显示错误:
<p>
。$
声明。Here是我的代码。
我在javascript中编码错误了吗? 在此先感谢:)
答案 0 :(得分:1)
如果我理解你的正确跟随会帮助你
<input type="image">
是图形提交按钮。不是文件上传按钮
要上传文件,您需要使用<input type="file">
。
$('div.box').on('click',function() {
$("input[type='file']").trigger('click');
});
.pic {
height: 638px;
width: 938px;
background-image: url('https://lh3.googleusercontent.com/sYpfIOEWajHnFESqdf0D4u1Kym0ErKpQ4gDn_Rwkxh3VxOrXw1cKgj-DZaNvVrAHpkhklQHNmBVHLhLbr57Le1699Hiibqm96oC-czexuHcn-LBkx5lKz_y9CQwvh_haCjDis7MDjhCOnIr2NU3eApw4ldE6riAo_PaqCH-oqDB2ZAIsFjiJTOqIEdAFBxSEWXNtVn4UOzqyk3y1ViAAS7XJ6gmxnh4zmVvIcUdzlhEOBKPIWnerm7OMBQ5N6zQK7pvgmHZ-SHEQWTpRN-B9ohdHsy8eHknlw7fYcUtI6JqOAZ0G93TJEuay-CU9WB8_3zf6OJsPpO-bWNa3AxEqeHRfUAHLiarTW_vBviDo6y8cvEIvGxe6OXGojbjSstRWq-Re-oYiZMkDnPuvloXETA7A84U9hGSkKU_eQoIpPhqOUH3diz1u8vVocWts6u7lOiHde7nqgrOEFQt1Cgu3jJaJ7oAzVEHeNWg7EhLQL33RQJEhL8p1R8X70QMttUkLEZjSVFNdSRKxEC7YZIj9gJel04Qz2Q8jwd3qcHZNaANwKI8TdAS0hWzDoPgWp1nATDM-Vx775-4Mpo7hR2Dr3hBR1ougQRm5p0-Rlqdft1gtqaM1JWfMr-TCfJE09ceJfUzGqR3Wfmr519NDpK_x317gh0_Z8kB8MwvYBKZS-g=w958-h638-no');
background-repeat: no-repeat;
}
.box {
float: left;
width: 100px;
height: 100px;
background-color: #FFF;
-webkit-filter: blur(0);
transform: matrix3d(3.356071, -0.24874, 0, 0.002092, 0.702007, 2.436204, 0, -0.000061, 0, 0, 1, 0, 61, 147, 0, 1);
transform-origin: 0px 0px 0px;
cursor: pointer;
border:2px solid red;
}
.box>p {
font-family: georgia;
line-height: o.45em;
font-size: 12px;
text-align: center;
}
#upload {
display: none;
}
<body>
<h1>Sample page</h1>
<div class="pic">
<input type="file" id="upload" />
<div class="box">
<p>...........</p>
<p>Add Screenshot</p>
<p>within this</p>
<p>red border</p>
<p>...........</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='java.js'></script>
</body>
@更新基于评论: -
当您将$("p")
更改为$(".box")
时,它会创建递归调用。
为了避免这种情况,您需要将<input type="file" id="upload" />
放在div box
之外。
此外,您可以将脚本和链接标记放置在文档中的任何位置,如果您在加载body元素之前将主体浏览器加载脚本之前放置它,并将它放在body标记之后
Recomented方法是在主体之后加载脚本,因为它将在加载脚本之前将所有元素加载到DOM,这将改善网页性能,并且还将减少导致在加载之前引用DOM元素的冲突< / p>