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

问题描述：

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

答

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.

答

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

答

What about that?

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

答

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>

$('#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

答

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

    }   
})

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

相关推荐