grails：不刷新页面的图像上传答案

【问题标题】：grails: Image upload without page refreshgrails：不刷新页面的图像上传
【发布时间】：2013-11-16 16:21:48
【问题描述】：

我对堆栈和谷歌通过 Ajax（在 Grails 中）上传图片进行了一些研究，我发现了一些旧链接，因此我决定问你们“有什么方法可以上传我的用户图片使用 Ajax”？我找到了一个 Grails 插件plugin link，但是这个插件的文档还不够。我想使用这个插件（正如我所说，由于缺乏这个插件的良好文档，看起来我很难实现它）或者请告诉我一些其他选项（如果有）。

【问题讨论】：

Ajax 不支持二进制数据（文件上传）。您找到的任何插件都可能使用 Flash 或隐藏的 iFrame。两者都是可接受的解决方案。
@Gregg 你对 ajax/xhr 的了解已经过时了。多年来一直可以通过 ajax/xhr 上传文件。
@RayNicholus 你能给我一个阅读链接吗？
您只能通过 Ajax 和 IE10+ 来实现（当然还有真正的浏览器）。对于绝大多数人来说，这不是一个解决方案。

标签： jquery ajax grails image-uploading grails-plugin

【解决方案1】：

试试这个..,.

查看：

<html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script language="Javascript">
function fileUpload(form, action_url, div_id) {
    // Create the iframe...
    var iframe = document.createElement("iframe");
    iframe.setAttribute("id", "upload_iframe");
    iframe.setAttribute("name", "upload_iframe");
    iframe.setAttribute("width", "0");
    iframe.setAttribute("height", "0");
    iframe.setAttribute("border", "0");
    iframe.setAttribute("style", "width: 0; height: 0; border: none;");

    // Add to document...
    form.parentNode.appendChild(iframe);
    window.frames['upload_iframe'].name = "upload_iframe";

    iframeId = document.getElementById("upload_iframe");

    // Add event...
    var eventHandler = function () {

        if (iframeId.detachEvent) iframeId.detachEvent("onload", eventHandler);
        else iframeId.removeEventListener("load", eventHandler, false);

        // Message from server...
        if (iframeId.contentDocument) {
            content = iframeId.contentDocument.body.innerHTML;
        } else if (iframeId.contentWindow) {
            content = iframeId.contentWindow.document.body.innerHTML;
        } else if (iframeId.document) {
            content = iframeId.document.body.innerHTML;
        }

        document.getElementById(div_id).innerHTML = content;

        // Del the iframe...
        setTimeout('iframeId.parentNode.removeChild(iframeId)', 250);
    }

    if (iframeId.addEventListener) iframeId.addEventListener("load", eventHandler, true);
    if (iframeId.attachEvent) iframeId.attachEvent("onload", eventHandler);

    // Set properties of form...
    form.setAttribute("target", "upload_iframe");
    form.setAttribute("action", action_url);
    form.setAttribute("method", "post");
    form.setAttribute("enctype", "multipart/form-data");
    form.setAttribute("encoding", "multipart/form-data");

    // Submit the form...
    form.submit();

    document.getElementById(div_id).innerHTML = "Uploading...";
}
</script>

<body>
<g:form>
    <input type="file" name="myFile"/><br/><br/>
    <input type="button" value="upload" onClick="fileUpload(this.form, '${g.createLink(controller: 'dashboard', action: 'test')}', 'upload'); return false;">
    <div id="upload"></div>
</g:form>
</body>
</html>

行动：

def test() {
    if (params.myFile) {
        def fileName
        def inputStream
        if (params.myFile instanceof CommonsMultipartFile) {
            fileName = params.myFile?.originalFilename
            inputStream = params.myFile.getInputStream()
        } else {
            fileName = params.myFile
            inputStream = request.getInputStream()
        }

        fileName = fileName.replaceAll(" ", "_")

        File storedFile = new File("DIRECTORY_PATH_TO_SAVE_IMAGE/${fileName}")

        storedFile.append(inputStream)

        render '<img src="data:' + 'jpg' + ';base64,' + new String(new Base64().encode(storedFile.bytes), "UTF-8") + '" ' + ' />'
    } else {
        render "No Image"
    }
}

【讨论】：