上传没有刷新页面的文件

时间:2012-03-01 12:27:42

标签: php ajax

我正在使用原型来轻松记录ajax请求/更新,现在我在我的页面上有这个表单,可以上传多个文件(html5允许基本表单) 但每当我点击提交按钮时,表单就会打开操作页面。 我不喜欢这样做有没有办法禁用刷新并仍然提交从表单发送的帖子数据?

我在提交时尝试过“return false”但这仍然会刷新我的页面

表格代码:

<form id='uploadfrm' onSubmit='check();return false;' action='upload_handler.php' enctype='multipart/form-data'>
        <input type='file' name='files[]' multiple='multiple' min='1' max='9999'/>
        <input type='hidden' name='msid' id='ms_id' value='5' />
        <input type='submit' value='upload' onClick='check();' />
    </form> 

获取表单的ajax请求代码:

new Ajax.Updater('uploadform','ajax-parser.php',{

            parameters: {
                action: 'get_mediaupload'
            }
        });

其中uploadform是一个隐藏的div,action是我在我的解析器中切换的var,但是隐藏的我仍然可以通过ligthview看到

  

Lightview.show({href:'#uploads',         选项:{autosize:true,topclose:true}});

我也尝试过ajax serialize()并请求方法从ajax端进行提交,但两次尝试都是unuccesfull。

我的页面设置非常简单我有一个索引页面和一个填充了php代码的ajax-parser来发送ajax请求,以及一个上传处理程序 处理程序代码:

if (isset($_FILES['files'])){
    foreach($_FILES['files']['name'] as $key=>$tmp_name)
    {
        echo $_FILES['files']['name'][$key];

    $upload_dir= "upload/" . $_FILES['files']['name'][$key];
    echo $upload_dir;
    if(move_uploaded_file($_FILES['files']['tmp_name'][$key], $upload_dir)) {
        echo "The file ".  $_FILES['files']['name'][$key]. 
        " has been uploaded";
    } else{
        echo "There was an error uploading the file, please try again!";
    }

}

}

2 个答案:

答案 0 :(得分:4)

Hese是上传文件的完美解决方案,无需刷新....

<script type="text/javascript">
 function init() {
    document.getElementById("slide_upload_form").onsubmit=function() {
    document.getElementById("slide_upload_form").target = "iframe_upload_target";
    document.getElementById("iframe_upload_target").onload = uploadDone;
        }
  }
</script>
<script type="text/javascript">
 window.onload=init; 
</script>

<script type="text/javascript">
 function uploadDone() {
var ret = frames['iframe_upload_target'].document.getElementsByTagName("body")[0].innerHTML;
var data = eval("("+ret+")"); 
    alert(data);
    if(data.error_msg == "null") {
    alert('Invalid Browse Image...');
 }
 </script>

<form id="slide_upload_form" method="post" enctype="multipart/form-data" 
     action="<?php echo SITE_URL."uploadslidecontent/index"?>">
      <iframe id="iframe_upload_target" onload="uploadDone()" name="iframe_upload_target"  
      src="" style="width:1px;height:1px;display:none"></iframe>
 <label><span>Image:</span>
    <input name="slideOneImg" id="slideOneImg" type="file" />
  </label>
</form>

如何验证浏览器字段是否为空,因此post返回到这样的数据 uploadslidecontent /索引

if($file_name == ''){
            print json_encode(array(
                "error_msg" =>  'null'
));

没有跨浏览器问题.....

答案 1 :(得分:0)

我使用uploadify。相当坚实的基础ui。