Ajax图片上传刷新手机页面答案

【问题标题】：Ajax image upload refreshing the page on mobileAjax图片上传刷新手机页面
【发布时间】：2014-12-04 04:09:23
【问题描述】：

您好，我有一个包含 Ajax 图像上传器的表单，它在桌面上运行良好，但是当我尝试使用移动设备时，它会导致页面在选择图像后刷新并且图像丢失（更不用说 jquery 的其他位了我已设置为在上传完成后运行）。

我找到了这个链接Android browser refreshes page after selecting file via input element，虽然它提供了解释，但我可以看到没有提供解决方案。那篇帖子是一年多以前的帖子了，我还没有在网上找到任何其他解决方案。

必须有一种解决方法，因为我可以看到它在其他网站上工作，例如http://www.putmeinthestory.com/

代码：

<form action="index.php?route=product/product/image_upload" onSubmit="return false" method="post" enctype="multipart/form-data" class="MyUploadForm">
    <input name="FileInput" id="FileInput" type="file" /><br />
    <input type="submit"  id="submit-btn" value="Upload File &raquo;" />
</form> 

<div id="output"></div>

Javascript：我不确定发布下面调用的所有函数是否与问题相关。

var options = {
    target:   '#output',   // target element(s) to be updated with server response
    beforeSubmit:  beforeSubmit,  // pre-submit callback
    success: afterSuccess,  // post-submit callback
    uploadProgress: OnProgress, //upload progress callback
    resetForm: true        // reset the form after successful submit
};

 jQuery('.MyUploadForm').submit(function() {
    $(this).ajaxSubmit(options);           
    return false;
});

【问题讨论】：

标签： javascript android jquery ajax

【解决方案1】：

我想我可能已经通过稍微更改代码来解决它... 我从 form 标记中删除了该操作，并将 url 包含在 ajax 中。

也许问题不在于 Android。（虽然我仍然对为什么问题出现在 SO 上感到困惑，如果是这样的话。）

在我确认它可以在各种设备上运行之前，我不想给它一个正确的答案。

<form action="" onSubmit="return false" method="post" enctype="multipart/form-data" class="MyUploadForm">

var options = {
    url: 'index.php?route=product/product/image_upload',
    target:   '#output',   // target element(s) to be updated with server response
    beforeSubmit:  beforeSubmit,  // pre-submit callback
    success: afterSuccess,  // post-submit callback
    uploadProgress: OnProgress, //upload progress callback
    resetForm: true        // reset the form after successful submit
};

【讨论】：