细节：

在下面，<input type="file" id="pImage" name="image" class="upload-img" style="opacity:0">将显示上传的图片，<input name="image" type="file"/>将选择文件。并<button>Upload</button>上传图片。

在<input type="file" id="pImage" name="image" class="upload-img" style="opacity:0">中它会选择文件，但我不希望每次点击Upload button后上传图像如何在选择文件本身时上传图片< / p>

HTML：

<div id="image" class="upload-img-span"></div>
<input type="file" id="pImage" name="image" class="upload-img" style="opacity:0">
<span class="upload-txt-span">Upload Img</span>
</div>
</td>
</tr>
<td colspan="4" align="left">
<input name="image" type="file"/>
<button>Upload</button>

脚本：

<script>
$("form#data").submit(function(){
    var formData = new FormData($(this)[0]);
    $.ajax({
        url: 'globalimageupload',
        type: 'POST',
        data: formData,
        async: false,
        success: function (data) 
        {
               $('#image').html(data);
              console.log(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });
    return false;
});
</script>

Answer 1

我不确定你到底想要什么，但看看.trigger（）文档是here。通过这个你可以触发任何其他事件，比如你的案例点击上传。希望它有帮助

Answer 2

通过使用以下代码，我认为它将解决您的问题，



<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
</head>
<body>
<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script>
$(function () {
$('#fileupload').fileupload({
    dataType: 'json',
    done: function (e, data) {
        $.each(data.result.files, function (index, file) {
            $('<p/>').text(file.name).appendTo(document.body);
        });
    }
});
});
</script>
</body>
</html>

<html> <head> <meta charset="utf-8"> <title>jQuery File Upload Example</title> </head> <body> <input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/vendor/jquery.ui.widget.js"></script> <script src="js/jquery.iframe-transport.js"></script> <script src="js/jquery.fileupload.js"></script> <script> $(function () { $('#fileupload').fileupload({ dataType: 'json', done: function (e, data) { $.each(data.result.files, function (index, file) { $('<p/>').text(file.name).appendTo(document.body); }); } }); }); </script> </body> </html>

欲了解更多信息，请访问以下链接， https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin

Answer 3

为了解决此问题，您需要使用.submit()之外的其他内容启动此功能。

<script>
$('input[type=file]').change(function() { 
    $("form#data").submit(function(){
        var formData = new FormData($(this)[0]);
        $.ajax({
            url: 'globalimageupload',
            type: 'POST',
            data: formData,
            async: false,
            success: function (data) 
            {
                   $('#image').html(data);
                  console.log(data)
            },
            cache: false,
            contentType: false,
            processData: false
        });
        return false;
    });
});
</script>

使用此方法，当用户选择文件时，它应自动开始上传。

Answer 4

试试这个： php文件：file_path.php

的print_r（$ _ FILES [ 'user_image']）;

$('#click_img_btn').click(function() {
			$('#image_fl_upload').click();
		});
		$('#image_fl_upload').change(function() {
			var formData = new FormData($('#image_up')[0]);
			$.ajax({
				url: 'file_path.php',
				type: 'POST',
				data: formData,
				async: false,
				success: function (data) 
				{
					   
					  alert(data);
				},
				cache: false,
				contentType: false,
				processData: false
			});
		});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="" name="save_user_photo1" id="image_up" class="profile_photo_upload" method="post" enctype="multipart/form-data">
                           
                           <input id="image_fl_upload" type="file" name="user_image" style="visibility:hidden" />
                           <input id="click_img_btn" name="save_user_photo" class="btn_change" type="button"  value="change"/>
                         </form>

Answer 5

我通过触发自己的函数

中的函数来解决它

即，

$("input[type='file']").on("change", function() 
    {
        $("form#data").submit();
});

修改过的脚本是

 <script>
 $(document).ready(function() 
 {
 $("form#data").submit(function(){
 var formData = new FormData($(this)[0]);
 $.ajax({
    url: 'globalimageupload',
    type: 'POST',
    data: formData,
    async: true,
    success: function (data) 
    {
           $('#image').html(data);
          console.log(data);            
    },
    cache: false,
    contentType: false,
    processData: false
    });
    return false;
});
$("input[type='file']").on("change", function() 
 {
        $("form#data").submit();
});
});
</script>

如何在选择图像时直接上传图片，而不是在JQuery中按下上传按钮

细节：

5 个答案:

我通过触发自己的函数