Upload file là chức năng rất quan trong mà hầu như website nào cũng cần tới,trong những bài hướng dẫn trước mình đã hướng dẫn cách upload file trong php,trong bài này mình sẽ hướng dẫn các bạn upload nhiều file bằng Ajax kết hợp Progress Bar sử dụng thư viện ajaxForm
– Trước tiên các bạn vào đây để tải thư viện ajaxForm về để sử dụng
Upload nhiều file bằng Ajax kết hợp Progress Bar
– Sau khi tải thư viện ajaxForm về chúng ta sẽ include vào website:
1
2
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.form.js"></script>
– Xây dựng form upload:
<form id="form_upload_ajax" method="post" action="upload.php" enctype="multipart/form-data">
<input type="file" name="img[]" multiple/>
<input type="submit" value="Upload" id="upload"/>
</form>
<div id="progress">
<div id="progressbar"></div>
<div id="percent">0%</div>
</div>
<div id="result">
</div>
Trong form upload này các bạn cần chú ý tới 2 yếu tố đó là form phải có thuộc tính enctype="multipart/form-data" và để upload nhiều file các bạn thêm thuộc tính multiple và dấu [] và sau tên file (img[])
– và thêm 1 chút css cho thêm phần sinh động
<style>
#form_upload_ajax { padding: 10px; background: #A5CCFF; border-radius: 5px;}
#progress { border: 1px solid #ccc; width: 500px; height: 20px; margin-top: 10px;text-align: center;position: relative;}
#progressbar { background: #F39A3A; height: 20px; width: 0px;}
#percent { position: absolute; left: 50%; top: 0px;}
</style>
– Trước tiên các bạn vào đây để tải thư viện ajaxForm về để sử dụng
Upload nhiều file bằng Ajax kết hợp Progress Bar
– Sau khi tải thư viện ajaxForm về chúng ta sẽ include vào website:
1
2
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.form.js"></script>
– Xây dựng form upload:
<form id="form_upload_ajax" method="post" action="upload.php" enctype="multipart/form-data">
<input type="file" name="img[]" multiple/>
<input type="submit" value="Upload" id="upload"/>
</form>
<div id="progress">
<div id="progressbar"></div>
<div id="percent">0%</div>
</div>
<div id="result">
</div>
Trong form upload này các bạn cần chú ý tới 2 yếu tố đó là form phải có thuộc tính enctype="multipart/form-data" và để upload nhiều file các bạn thêm thuộc tính multiple và dấu [] và sau tên file (img[])
– và thêm 1 chút css cho thêm phần sinh động
<style>
#form_upload_ajax { padding: 10px; background: #A5CCFF; border-radius: 5px;}
#progress { border: 1px solid #ccc; width: 500px; height: 20px; margin-top: 10px;text-align: center;position: relative;}
#progressbar { background: #F39A3A; height: 20px; width: 0px;}
#percent { position: absolute; left: 50%; top: 0px;}
</style>
0 nhận xét:
Đăng nhận xét