I have recently undertaken a project to create a simple multiple file upload system where you can assign a title to each file uploaded. Now I was recommended to go with Blueimp's jQuery File uploader as it provides a drag n drop ability.
So here is where I am getting confused. I have looked at the tutorial or description given by blueimp on GitHub Link here . I can do the adding an additional field but this applies to all files uploaded. (I am using CodeIgniter to handle the files to DB).
So how would I go about adding an individual title to each file added? As I cannot make sense of the tut on github. (Maybe a jsfiddle example which I can go away an learn from?)
Edit*
Now I have managed to get the extra input box added...rather simple to add in the end (doh!). SO this is what I have in my index.html file
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-upload fade">
<td>
<span class="preview"></span>
</td>
<td>
<p class="name">{%=file.name%}</p>
{% if (file.error) { %}
<div><span class="label label-important">Error</span> {%=file.error%}</div>
{% } %}
</td>
<td class="title"><label>File Title: <input name="title[]" required="required"></label></td>
<td>
<p class="size">{%=o.formatFileSize(file.size)%}</p>
{% if (!o.files.error) { %}
<div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="bar" style="width:0%;"></div></div>
{% } %}
</td>
<td>
{% if (!o.files.error && !i && !o.options.autoUpload) { %}
<button class="btn btn-primary start">
<i class="icon-upload icon-white"></i>
<span>Start</span>
</button>
{% } %}
{% if (!i) { %}
<button class="btn btn-warning cancel">
<i class="icon-ban-circle icon-white"></i>
<span>Cancel</span>
</button>
{% } %}
</td>
</tr>
{% } %}
</script>
I have also added this to the bottom of the main.js file
$('#fileupload').bind('fileuploadsubmit', function (e, data) {
var inputs = data.context.find(':input');
if (inputs.filter('[required][value=""]').first().focus().length) {
return false;
}
data.formData = inputs.serializeArray();
The next question I have is how do I assign the title as the filename now?
只需添加不带扩展名的file.name作为文本字段的值即可。
<td class="title"><label>File Title: <input name="title[]" value="{%= file.name.split('/').pop().split('.').shift()%}" required="required"></label></td>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.