这篇文章主要介绍了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" /><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" /><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如何实现多文件上传操作”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。