ask mas, kan saya bikin uploader file pake ajax, nah saya bikin pertama tanpa framework php, trus kalo mau di masukin ke framework php (codeigniter) yang diubah yang mana ya ? tapi saya pengenya file phpnya di jadiin controller di CI kalo gak dijadiin controller udah bisa.. php : html: Uploader Upload files Uploaded file links will appear here. document.getElementById(submit).addEventListener(click, function(e){ e.preventDefault(); var f = document.getElementById(file), pt = document.getElementById(pt), pb = document.getElementById(pb); app.uploader({ files: f, progressBar: pb, progressText: pt, processor: upload.php, finished: function(data){ var uploads = document.getElementById(uploads), succeeded = document.createElement(div), failed = document.createElement(div), anchor, span, x; if(data.failed.length){ failed.innerHTML = Unfortunately, the following failed:; } uploads.innerText = ; for(x = 0; x < data.succeeded.length; x = x + 1){ anchor = document.createElement(a); anchor.href = files/ + data.succeeded[x].file; anchor.innerHTML = data.succeeded[x].name; anchor.target = _blank; succeeded.appendChild(anchor); console.log(anchor); } for(x = 0; x < data.failed.length; x = x + 1){ span = document.createElement(span); span.innerHTML = data.failed[x].name; failed.appendChild(span); } uploads.appendChild(succeeded); uploads.appendChild(failed); }, error: function(){ console.log(Not Working); } }); }); JS : var app = app || {}; (function(o){ use strict; //Private methods var ajax, getFormData, setProgress; ajax = function(data){ var xmlhttp = new XMLHttpRequest(), uploaded; xmlhttp.addEventListener(readystatechange, function(){ if(this.readyState == 4){ if(this.status == 200){ uploaded = JSON.parse(this.response); //console.log(uploaded); if(typeof o.options.finished === function){ o.options.finished(uploaded); } }else{ if(typeof o.options.error === function){ o.options.error(); } } } }); xmlhttp.upload.addEventListener(progress, function(event){ var percent; if(event.lengthComputable === true){ percent = Math.round((event.loaded / event.total) * 100); setProgress(percent); } }); xmlhttp.open(post, o.options.processor); xmlhttp.send(data); }; getFormData = function(source){ //console.log(source); var data = new FormData(), i; for(i = 0; i < source.length; i = i + 1){ data.append(file[], source[i]); } data.append(ajax, true); return data; }; setProgress = function(value){ if(o.options.progressBar !== undefined){ o.options.progressBar.style.width = value ? value + % : 0; } if(o.options.progressText !== undefined){ o.options.progressText.innerText = value ? value + % : 0; } }; o.uploader = function(options){ o.options = options; if(o.options.files !== undefined){ ajax(getFormData(o.options.files.files)); //console.log(o.options.files.files); } }; }(app));
Posted on: Wed, 31 Dec 2014 03:03:24 +0000
Trending Topics
Recently Viewed Topics
© 2015