我曾经通过Ajax（Grails）对堆栈和Google进行图片上传进行了一些研究，我找到了一些旧的链接，因此我决定向你们询问“是否有任何方法可以上传我的用户Image使用Ajax “？我找到了一个Grails插件plugin link但是这个插件的文档是不够的。我想使用这个插件（正如我所说，由于缺少这个插件的好文档，我认为很难实现它）或者请告诉我我可以选择一些备选方案。
答案 0 :(得分：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"
}
}