Как изменить URL-адрес XmlHttpRequest при загрузке изображения

surma спросил: 28 апреля 2018 в 09:16 в: javascript

Я пытаюсь загрузить изображение, и он работает. но проблема в том, когда я пытаюсь обновить этот образ. У меня проблема, потому что она перенаправляется на неправильный URL. Форма представляет сообщение для этого url

POST http://127.0.0.1/mgt/upload/processImage/foodImage

, и результат близок к этому

GET
http://127.0.0.1/mgt/food/viewFoodDetails/temp/uploads/images/foodImage/937d932fcbf3c6ba36b7eed65cecd045.png

Но я хочу, чтобы результат get (я не хочу, чтобы он получал food / viewFoodDetails из URL-адреса)

GEThttp://127.0.0.1/mgt/temp/uploads/images/foodImage/937d932fcbf3c6ba36b7eed65cecd045. png

Может ли кто-нибудь мне помочь?

вот моя js

$.fn.uploadFile=function(opts)
    {
        var opts=$.extend({
            allowed:['png, jpg']
        },opts);
        return this.each(function(){
            var pb='<div class="progress" style="width:0"><span>0%</span></div>',
            _this=$(this),
            progressbar=$(_this.attr("data-progressbar")),
            endpoint='http://127.0.0.1/mgt/upload/processImage/foodImage',
            viewer=$(_this.attr("data-viewer")),
            element=$(_this.attr("data-element")),
            downloadLink=$(_this.attr("data-downloadLink"));
            //cct=$(_this).parents("form").find("input[name=csrfwebpos]").val();
            //console.log(_this, progressbar, endpoint, viewer, element, downloadLink);
            _this.change(function(){
                var filename=_this.val().toLowerCase().split(/[\\\/]/).pop(),is_allowed=false,
                ext=filename.split(".").pop();
                //console.log(filename, ext);
                if(filename==''){
                    return;
                }
                $.each(opts.allowed,function(i,el){
                    if(ext==el){
                        is_allowed=true;
                    }
                });
                if(!is_allowed){
                    showError("This file type is not supported. Please select another file.");
                    return;
                }else{
                    progressbar.show(0);
                    var files=_this[0].files,
                    file=_this[0].files[0], 
                    headers={
                            "Cache-Control":"no-cache",
                            "X-Requested-With":"XMLHttpRequest",
                            "X-File-Name":file.fileName||file.name,
                            "X-File-Size":file.fileSize||file.size,                    };
                    if(file.size>700000){
                        showError("File can not be larger than 700KB in size.");
                        return;
                    }
                    _this.attr("disabled",true);
                    progressbar.append(pb);
                    var bar=progressbar.find(".progress"),percent=bar.find("span");                    var xhr = new XMLHttpRequest();
                    var upload = xhr.upload;
                    upload.fileObj = file;
                    upload.downloadStartTime = new Date().getTime();
                    upload.currentStart = upload.downloadStartTime;
                    upload.currentProgress = 0;
                    upload.startData = 0;
                    viewer.hide(0);                    upload.onprogress=function(e){
                        if(e.lengthComputable){
                            var _p=Math.floor((e.loaded/e.total)*100);
                            bar.css("width",_p+"%");
                            percent.html(_p+"%");
                            if(_p==100){
                                percent.html("Processing...");
                            }
                        }
                    };                    xhr.onload=function(e){
                        status = xhr.status;
                        if(e.target.readyState == 4){
                            var data=eval("("+this.responseText+")");                            console.log(this);
                            console.log(data);                            if(data && data.successFunction){
                                data.successFunction.apply(_this);
                            }
                            if(data && data.fileName!=''){
                                element.val(data.fileName);
                                element.trigger("change");
                                viewer.show(0);
                                $(viewer).find("img").prop("src",data.fileName);
                            }
                            if(data && data.downloadLink!=''){
                                downloadLink.html('<a href="'+data.downloadLink+'">Download Server Response</a>');
                            }                            _this.val("").attr("disabled",false);
                            progressbar.find(".progress").remove();
                            progressbar.hide(0);
                        }
                    };
                    xhr.open("POST",endpoint,true);                    //console.log(endpoint);                    /*
                    var oMyForm = new FormData();
                    oMyForm.append("csrfwebpos", cct);
                    oMyForm.append("file", file);
                    */
                    for(var prop in headers){                        xhr.setRequestHeader(prop, headers[prop]);
                    }
                    xhr.send(file);
                }
            });
        });
    };

Это функция загрузки изображений . php

public function processImage($uploadFolder="profile", $userFileName="")
    {
        $tempFilePath="temp/$uploadFolder";        if (!file_exists($tempFilePath)) {
            @mkdir($tempFilePath);
        }
        @chmod($tempFilePath, 0777);
        $path=$tempFilePath."/";        $headers=getallheaders();        if (isset($headers['X-File-Size'], $headers['X-File-Name'])) {
            // create the object and assign property
            $file = new stdClass;
            $file->name = basename($headers['X-File-Name']);
            $file->size = $headers['X-File-Size'];
            $file->content = file_get_contents("php://input");            $fileparts=fileExtension($file->name);
            if ($userFileName=='') {
                $filename = md5(
                    $this->session->userdata('userid') . 
                    uniqid() . 
                    microtime(true) . 
                    mt_rand() . 
                    $file->name . 
                    $file->size . 
                    $this->session->userdata('userid')
                );
            } else {
                $filename=$userFileName;
            }
            $file->name=$filename.$fileparts["extension"];
           // echo $path.$file->name;            if (@file_put_contents($path.$file->name, $file->content)) {
                $old = getcwd(); // Save the current directory
                @chdir($path);
                chmod($file->name, 0644);
                chdir($old);            }
        } 
    }

Это мой HTML

<script type='text/javascript'>
    $(document).ready(function() {
        $('#uploadImage').uploadFile();
    });
</script>        <form method='post' action='<?=$baseUrl?>food/saveFood' accept-charset='utf-8'  enctype='multipart/form-data'>        <table class='table table-bordered table-curved'>
            <tr>
                <td>
                    <div class='form-group col-md-12' style='padding:0px;'>
                        <div class='fileupload fileupload-new' data-provides='fileupload'>
                            <div class='input-group'>
                                <div class='form-control uneditable-input'><i class='icon-file fileupload-exists'></i> 
                                    <span class='fileupload-preview'></span>
                                </div>
                                <div class='input-group-btn'>
                                    <a class='btn btn-default btn-file'>
                                        <span class='fileupload-new'>Select file</span>
                                        <span class='fileupload-exists'>Change</span>
                                        <input type='file' class='file-input' id='uploadImage' data-progressbar='.pb' data-element='#appImg' data-viewer='#appPhoto' />
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class='clearfix'></div>
                    <div class='pb pull-left col-md-12' style='display:none;'></div>
                    <div id='appPhoto'><img src='' /></div>
                    <input type='hidden' name='imagePath' id='appImg' value='' />                </td>
    </form>

1 ответ

surma ответил: 30 апреля 2018 в 06:41

Я решил это, я добавил baseurl в путь к файлу

из
$ (viewer) .find ("img"). prop ("src" , data.fileName); до $ (просмотра) .find ("IMG") проп ("SRC", BaseUrl + data.fileName);.