javascript - 在图像上传过程中删除上传按钮和文件名

标签 javascript php jquery image-uploading

使用给定的表单,我首先单击“选择文件”,打开文件,其名称位于其旁边 然后我单击“上传”按钮来上传图像。我想要做的是单击“选择文件”,打开文件,但名称不应出现在文件旁边,并且图像应该在不单击“的情况下上传”在此之后上传按钮”。这是如何实现的?

   <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; 
    }); 
}); 

最佳答案

检查这个 Demo Fiddle

如果您使用的是 jQuery,

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

或者只是,

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

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

关于javascript - 在图像上传过程中删除上传按钮和文件名,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23956327/

相关文章:

c# - 何时选择从代码隐藏而不是外部 js 文件进行 Javascript 注入(inject)

php - 用于在一张表中显示和排序消息及其回复的 SQL

javascript - 从 valums fileuploader 中删除拖放

javascript - 无法在 jquery 中获取 Ajax CORS 请求

javascript - 在react/redux中,在store prop上调用map()会编辑store本身的prop

javascript - 获取 React 组件中子元素的高度

javascript - 如何在 onKeyPress 期间获取输入文本框的文本?

PHP cURL GET 请求和请求的主体

php - WooCommerce 的 WCFM 市场 - 忽略当前产品

jquery - 使用 Jquery 进行时间验证