Php 单击链接打开文件浏览器
我正在尝试复制Facebook上用于更改您的个人资料图片的照片上载脚本。我想让用户点击一个链接，它会自动打开文件浏览器，然后当他们点击“确定”时，它会提交图像 我想知道的是，你是如何在点击一个链接时触发文件浏览器的，当他们按ok时，你是如何触发提交的 我已经有了一个表单，但希望它更精简 当前脚本：Php 单击链接打开文件浏览器,php,jquery,file-upload,Php,Jquery,File Upload,我正在尝试复制Facebook上用于更改您的个人资料图片的照片上载脚本。我想让用户点击一个链接，它会自动打开文件浏览器，然后当他们点击“确定”时，它会提交图像 我想知道的是，你是如何在点击一个链接时触发文件浏览器的，当他们按ok时，你是如何触发提交的 我已经有了一个表单，但希望它更精简 当前脚本： <a href="#" data-reveal-id="changeImage"><i class="fa fa-pencil"></i> Edit Client
<a href="#" data-reveal-id="changeImage"><i class="fa fa-pencil"></i> Edit Client Image</a>
<div id="changeImage" class="reveal-modal">
<form action="view.php" enctype="multipart/form-data" method="post" name="imgForm" id="imgForm">
<input type="file" name="clientImage" id="clientImage" accept="image/*" />
<input name="doEditImg" type="submit" id="doEditImg" value="Save" />
</form>
</div>
在这里重新发明轮子没有意义：）有一大堆好的jquery（和纯js）lib用于文件上传
看起来它会做你想要的（而且看起来也不错）。另一个我听说过很多关于它的好消息：。两者都支持单击一个简单的链接来启动文件浏览器，选择一个文件并开始上传过程等等。我用下面的代码解决了这个问题 链接：
$('#changeImage').click(function(){
$('#clientImage').trigger('click');
return false;
});
它的工作方式是有一个真正的文件选择器按钮，但它是隐藏的。然后有一个链接，它的所有功能都与文件选择器链接，因此当单击链接时，会单击文件选择器并显示浏览窗口。这在jquery和一些css中是可能的 下面的代码可能会帮助您，根据您的需要进行修改 第一步。jquery文件 您可以下载它，也可以从中使用api
步骤2.代码
<html>
<script type="text/javascript" src="code.jquery.com/jquery-1.10.2.min.js"></script> //use an api link to avoid keep on downloading the latest jquery version
<script>
//the script below will load the preview of the image in a div which has an id of image_preview
if (window.FileReader) {
function handleFileSelect(evt) {
var files = evt.target.files;
var f = files[0];
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
document.getElementById('image_preview').innerHTML = ['<img class="the_img_prev" src="', e.target.result,'" title="', theFile.name, '">'].join('');
};
})(f);
reader.readAsDataURL(f);
}
} else {
alert('This browser does not support FileReader');
}
//the script will make the link act like a file selector
document.getElementById('files_selector').addEventListener('change', handleFileSelect, false);
</script>
<!-------------the form part---------------->
<form id="image" action="upload.php" method="POST">
<input type="file" id="files_selector" name="image" style="display:none;"><!--the hidden selector-->
<a href="#" class="image_selector" id="image_selector" onclick="document.getElementById('files_selector').click();" /><!--the link that acts as the selector -->
</form>
<div id="image_preview"><!-----the selected image will be previewed in this div---></div>
</html>
//使用api链接避免继续下载最新的jquery版本
//下面的脚本将在id为image\u preview的div中加载图像预览
if（window.FileReader）{
功能手柄文件选择（evt）{
var files=evt.target.files；
var f=文件[0]；
var reader=new FileReader（）；
reader.onload=（函数（文件）{
返回函数（e）{
document.getElementById（'image_preview'）。innerHTML=[''）.join（''）；
};
})（f） )；
reader.readAsDataURL（f）；
}
}否则{
警报（“此浏览器不支持FileReader”）；
}
//该脚本将使链接起到文件选择器的作用
document.getElementById（'files_selector'）。addEventListener（'change'，handleFileSelect，false）；