Question

在我的last question，没有人可以给我任何正确的解决方案。所以我感谢另一个上传图片的过程。

现在我想在选择输入类型文件后立即上传图像。

如何通过此脚本执行此操作。

html :(这里888是php的动态ID）

<form class="upload_Reply" id="888'" method="post" enctype="multipart/form-data">
<label for="file">Filename (Max 200 Kb) :</label>
<input type="file" name="file" class="repfile" id="888" value="" /> 
</form>

脚本：

$(document).on('change','.repfile',function (){
    previewPic(this);
});

function previewPic(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $("#preview_rep"+ input.id).attr('src', e.target.result);
            $("#output_rep"+ input.id).show();
            var str = e.target.result;
            var ID = input.id;
            UploadFile(str, ID);
        };
        reader.readAsDataURL(input.files[0]);
    }
}
function UploadFile(str, ID) {
     str = ???
     var EID = ID;
     $('.loading').show();
     $.ajax({
            type:"post",
            url:"../upload.php",
            data:  new FormData(this),
            contentType: false,
            cache: false,
            processData:false,
            success: function(response){
                $('#img'+ EID).attr('value', response);
                $('.loading').hide();
        },
    });
    return false;   
}

Answer 1

我建议你使用jquery第三方可靠的稳定插件，而不是你自己的自定义代码

在插件的帮助下，你可以

显示上传文件的进度
验证是否选择了正确的文件
预览图片
更改预览
以及更多选项

一些最好的插件和易于使用的插件

uploadify -
<强> blue imp file upload

我自己使用 uploadify ，它为我完成所有工作。

$(document).ready(function (){
       $('#repfile').uploadify({
         'uploader'  : '/uploadify/uploadify.swf',
         'script'    : '/uploadify/uploadify.php',
         'cancelImg' : '/uploadify/cancel.png',
         'folder'    : '/uploads',
         'auto'      : true
      });
});

希望我的回答很有帮助

除此之外，您可以访问此处 - upload files with ajax

立即在选择

1 个答案: