虚位以待(AD)
虚位以待(AD)
首页 > 网络编程 > AJAX相关 > 基于Ajaxupload的多文件上传操作

基于Ajaxupload的多文件上传操作
类别:AJAX相关   作者:码皇   来源:互联网   点击:

本文通过实例代码给大家介绍了基于Ajaxupload的多文件上传操作,代码简单易懂,非常不错,具有参考借鉴价值,需要的的朋友参考下吧

废话不多说了,直接给大家贴代码了,具体代码如下所示:

    <pre name="code" class="php"><?php $ele = $_GET['ele'];
    $file = $_FILES['thumb_'.$ele];
    $pathinfo = pathinfo($file['name']);
    $filedir = 'uploads/' . date('Y');
    if (!is_dir($filedir)) {
    mkdir($filedir);
    }
    $filedir .= '/' . date('md');
    if (!is_dir($filedir)) {
    mkdir($filedir);
    }
    $filedir .= '/' . time() . '_' . mt_rand(1000, 9999) . '.' . $pathinfo['extension'];
    $msg = '';
    if (!move_uploaded_file($file['tmp_name'], $filedir)) {
    $msg = '上传失败';
    }
    $data = array('msg' => $msg, 'filedir' => $filedir);
    sleep(2);
    echo json_encode($data);
    ?></pre><br> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html;
    charset=gbk" /><title>Ajax上传</title><script src="jquery-1.4.4.min.js" type="text/javascript"></script><script src="ajaxfileupload.js" type="text/javascript"></script><script type="text/javascript">function fileupload( ele ){
    $("#loading").ajaxStart(function() {
    jQuery("#photoImg").hide();
    jQuery(this).show();
    }
    ).ajaxComplete(function() {
    jQuery(this).hide();
    jQuery("#photoImg").show();
    }
    );
    $.ajaxFileUpload({
    url: "index.php?ele="+ele,secureuri: false,fileElementId: "thumb_"+ele,dataType: "json",success: function(data, status) {
    if(data.msg != '') {
    alert(data.msg);
    }
    else {
    $("[name='photo_"+ele+"']").val(data.filedir);
    $("#photoImg_"+ele).attr("src", data.filedir);
    }
    }
    ,error: function (data, status, e) {
    alert(e);
    }
    }
    )return false;
    }
    </script></head><body><!-- 第一个ajax上传 --><input type="file" id="thumb_1" name="thumb_1" onchange="return fileupload('1');
    " /><div><img src="ajaxLoading.gif" id="loading" style="display: none" /><img src="" id="photoImg_1" width="200px" height="150px" /><input type="text" name="photo_1" size=100/></div><hr/><!-- 第二个ajax上传 --><input type="file" id="thumb_2" name="thumb_2" onchange="return fileupload('2');
    " /><div><img src="ajaxLoading.gif" id="loading" style="display: none" /><img src="" id="photoImg_2" width="200px" height="150px" /><input type="text" name="photo_2" size=100 /></div><!-- 第二个ajax上传 --><input type="file" id="thumb_2" name="thumb_2" onchange="return fileupload('2');
    " /><div><img src="ajaxLoading.gif" id="loading" style="display: none" /><img src="" id="photoImg_2" width="200px" height="150px" /><input type="text" name="photo_2" size=100 /></div><a>添加</a></body></html> <pre></pre> <p><br> </p> <p><br> </p> <p><br> </p> <br>

总结

以上所述是小编给大家介绍的基于Ajaxupload的多文件上传操作,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关热词搜索: ajaxupload多文件上传