在图像上传期间删除上传按钮和文件名答案

【问题标题】：Remove upload button and filename during image upload在图像上传期间删除上传按钮和文件名
【发布时间】：2014-07-20 07:34:36
【问题描述】：

使用给定的表格，我首先点击“选择文件”，打开文件，它的名字出现在它旁边然后我点击“上传”按钮“上传图片。我想要做的是点击“选择文件”，打开文件但名称不应该出现在它旁边，图片应该上传而不点击“上传按钮”之后。如何实现？

   <div id="image_container" name="image_container">
        <img src="../image/ab.jpg"  alt="Cover" width="900px" height="500px">
        <div class="btn-group" id="cov" name="cov" >
           <button  class="btn dropdown-toggle" data-toggle="dropdown" id="mybtn" onclick="dropdown()">Action</button>
           <ul class="dropdown-menu" id="dropdown-menu" style="display:none">
<!-- dropdown menu links -->
            <li><form action="upload.php" method="post" enctype="multipart/form-data" id="MyUploadForm">  
                <input name="ImageFile" id="imageInput" type="file" />
                <label id="fileup" for="imageInput">Upload File</label>
                <input type="submit"  id="submit-btn" value="Upload" />
                <img src="img/loader.gif" id="loading-img" style="display:none;" alt="Please Wait"/>
                </form>
                <div id="output"></div>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Another link</a></li>
           </ul>
        </div>
    </div>

$(document).ready(function() { 
    var options = { 
        target: '#output', // target element(s) to be updated with server response 
        beforeSubmit: beforeSubmit, // pre-submit callback 
        success: afterSuccess, // post-submit callback 
        resetForm: true // reset the form after successful submit 
    }; 

    $('#MyUploadForm').submit(function() { 
        $(this).ajaxSubmit(options);            
        // always return false to prevent standard browser submit and page navigation 
        return false; 
    }); 
});

【问题讨论】：

标签： javascript php jquery image-uploading

【解决方案1】：

检查这个Demo Fiddle。

如果你使用的是 jQuery，

$('#imageInput').change(function(){
    $("#submit-btn").click();          //$('#MyUploadForm').submit();
});

或者只是，

<input name="ImageFile" id="imageInput" type="file" onChange="this.submit();" />

要隐藏文件名，您必须操作 css，或者隐藏整个按钮并在其中放置另一个按钮。

【讨论】：

它可以工作，但你能告诉我如何在点击时获得像“上传图片”这样的普通文本，我们可以上传图片而不是点击表单中的“选择文件”？
我已经编辑了我的 html。如果我按照您的建议使用标签，则“上传文件”的显示方式与列表中的其他成员不同，甚至光标也不会改变其形状
你需要用css改变它的位置。

【解决方案2】：

document.getElementById("imageInput").onchange = function() {
    document.getElementById("MyUploadForm").submit();
};

【讨论】：

您可以在声明 options 变量之前添加它。在此之前：var options = {

【解决方案3】：

那又怎样？

<input name="ImageFile" id="imageInput" type="file"
onChange="this.submit();this.visibility='hidden';" />

【讨论】：

【解决方案4】：

您可以使用label 创建自己的上传按钮，然后隐藏input 本身。

HTML

<form action="#">
  <label for="upload">Pretend Button</lable>
  <input type="file" id="upload" name="image">
</form>

JS

$('#upload').on('change', function () {
  $(this).closest('form').trigger('submit');
});

CSS

input {
  position: absolute;
  top: 0;
  left: -9999px;;
}

这是一个小演示：http://jsbin.com/rirupeco/2/edit?html,css,js,output

【讨论】：

【解决方案5】：

也许是一个小用户体验技巧，也是您请求的灵感：

在文件选择窗口中选择文件并单击“确定”后，它应该立即上传。无需额外点击提交，通过以下方式：

var flag_fileSelection = false;

$("#element").click(function(){
    flag_fileSelection = true;
})

$(window).focus(function(){
    if (flag_fileSelection) {
        flag_fileSelection = false;

        // user is done choosing files
        $("#form").submit();

    }   
})

【讨论】：