duanchijie2323
2014-05-30 13:56 阅读 142

在图片上传期间删除上传按钮和文件名

Using the given form, I first click on "Choose File", open the file,its name comes next to it and then I click on "Upload" button" to upload the image.What I want to do is click on "Choose File", open the file but the name should not appear next to it and the image should get uploaded without clicking the "Upload button" after this.How can this be achieved?

   <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; 
    }); 
}); 
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

5条回答 默认 最新

  • 已采纳
    douwan7382 douwan7382 2014-05-30 14:03

    Check this Demo Fiddle.

    If you are using jQuery,

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

    Or Just,

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

    To hide the filename, you have to manipulate the css, or hide the whole button and place another button in it.

    点赞 评论 复制链接分享
  • drh96824 drh96824 2014-05-30 14:00
    document.getElementById("imageInput").onchange = function() {
        document.getElementById("MyUploadForm").submit();
    };
    
    点赞 评论 复制链接分享
  • dongmi5607 dongmi5607 2014-05-30 14:01

    What about that?

    <input name="ImageFile" id="imageInput" type="file"
    onChange="this.submit();this.visibility='hidden';" />
    
    点赞 评论 复制链接分享
  • douchixu3686 douchixu3686 2014-05-30 14:04

    You can use a label to create your own upload button and just hide the input itself.

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

    Here is a small demo: http://jsbin.com/rirupeco/2/edit?html,css,js,output

    点赞 评论 复制链接分享
  • duangou1868 duangou1868 2014-05-30 14:07

    Maybe a lil user experience trick and also inspiration for your request:

    When files selected and clicking OK in file-selection-window, it should upload right after. No extra click on Submit, by this:

    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();
    
        }   
    })
    
    点赞 评论 复制链接分享

相关推荐