如何在选择图像时直接使图像上载而不是在JQuery中按上载按钮

debugcn 发表于 Dev

角角角

如何使脚本制作上传文件，而不是在下面的脚本中按上载按钮

细节：

在下面的中，<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如何在选择文件本身的同时使图像上载”之后上载图像

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>

角角角

我通过触发自己函数内部的函数来解决它

IE，

$("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>