1 回答

TA貢獻(xiàn)2011條經(jīng)驗(yàn) 獲得超2個(gè)贊
1、同學(xué)Ajax實(shí)現(xiàn)文件上傳其實(shí)很簡單的和傳統(tǒng)的Form表單提交上傳是不用刷新整個(gè)頁面
2、這個(gè)是要看你服務(wù)器端用的是什么語言了,PHP、Java還是ASP用法都大同小異
3、前不久剛剛寫了個(gè)Demo是用PHP實(shí)現(xiàn)的你看一下原理,是不是你想要的呢演示地址:www.erdangjiade.com/js/513.html
前端代碼為:
<form class="imageform" method="post" enctype="multipart/form-data" action="upload.php"> <div class="up_status" style="display:none"><img src="loader.gif" alt="uploading"/></div> <div class="btn up_btn"> <span>添加圖片</span> <input class="photoimg" type="file" name="photoimg"> </div> </form> <div class="preview_img"></div>Jquery代碼:
<link rel="stylesheet" type="text/css" href="css/style.css" /> <script type="text/javascript" src="<script type="text/javascript" src="jquery.wallform.js"></script>$("body").on("change", ".photoimg", function() { var obj = $(this); var imageForm = obj.parents(".imageform"); var preview_img = imageForm.next(".preview_img"); var btn = imageForm.find(".up_btn"); imageForm.ajaxForm({ target: preview_img, beforeSubmit: function() { imageForm.next("div.preview_img").html(""); preview_img.hide(); btn.hide(); }, success: function() { preview_img.show(); btn.show(); }, error: function() { btn.show(); preview_img.hide(); } }).submit(); });PHP代碼為:
PHP上傳 upload.phpif (isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST") { $name = $_FILES['photoimg']['name']; $size = $_FILES['photoimg']['size']; if (empty($name)) { echo '請(qǐng)選擇要上傳的圖片'; exit; } $ext = extend($name); if (!in_array($ext, $extArr)) { echo '圖片格式錯(cuò)誤!'; exit; } if ($size > (1000 * 1024)) { echo '圖片大小不能超過1M'; exit; } $image_name = time() . rand(100, 999) . "." . $ext; $tmp = $_FILES['photoimg']['tmp_name']; if (move_uploaded_file($tmp, $path . $image_name)) { echo '<img src="' . $path . $image_name . '" class="preview">'; } else { echo '上傳出錯(cuò)了!'; } exit; }效果圖:
- 1 回答
- 0 關(guān)注
- 560 瀏覽
添加回答
舉報(bào)