Question

我正在使用jquery插件transloadit将图像上传到我的amazon s3存储桶。
我现在所拥有的只是一个简单的调整大小并上传到我在亚马逊上的图像文件夹。

现在我想在一个包含其他输入字段的表单中使用上传器。如果在单击图像上载按钮时选择图片，则会获得图像预览，但图像尚未上载。当您单击整个表单的“提交”时，图像将被上传。

有人可以帮我解决这个问题，还是让我继续前进？

这是我将图片上传到亚马逊的代码：

<form id="UploadForm" action="/index/upload" enctype="multipart/form-data" method="POST">
<input type="file" name="my_file" multiple="multiple" />

$(function() {
    // We reference our html form here
    $('form#UploadForm').transloadit({
        wait: true,
        triggerUploadOnFileSelection: true,
        params: {
            auth: { key: "key" },
            template_id: "templateid"
        }
    });
});


public function uploadAction()
{
    $this->_helper->layout->disableLayout();
    $this->_helper->viewRenderer->setNoRender();

    $transloaditData = $_POST['transloadit'];
    if (ini_get('magic_quotes_gpc') === '1') {
        $transloaditData = stripslashes($transloaditData);
    }
    $transloaditData = json_decode($transloaditData, true);

    foreach ($transloaditData['uploads'] as $upload) {
        // do something with the uploaded file here
    }

    foreach ($transloaditData['results'] as $encodingResult) {
        // do something with the encoding result here here,
        // like saving its URL to the database
    }
}

Answer 1

尝试使用filereader

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#imgInp").change(function(){
    readURL(this);
});

http://jsfiddle.net/LvsYc/

显示预览图像，在提交表单上传

1 个答案: