vue.js image batch upload plug-in
The vue.js image batch upload plug-in is an image upload control based on the vue.js framework. It is suitable for mobile phone image upload code. It supports batch upload, drag-and-drop image upload, display of file number and size, etc.
js code
<script src="js/vue2.2.2.js"></script>
<script>
// import up from './src/components/Hello'
var app = new Vue({
el: '#app',
data () {
return {
imgList: [],
size: 0
}
},
methods: {
fileClick(){
document.getElementById('upload_file').click()
},
fileChange(el){
if (!el.target.files[0].size) return;
this.fileList(el.target.files);
el.target.value = ''
},
fileList(files){
for (let i = 0; i < files.length; i++) {
this.fileAdd(files[i]);
}
},
fileAdd(file){
this.size = this.size + file.size;//总大小
let reader = new FileReader();
reader.vue = this;
reader.readAsDataURL(file);
reader.onload = function () {
file.src = this.result;
this.vue.imgList.push({
file
});
}
},
fileDel(index){
this.size = this.size - this.imgList[index].file.size;//总大小
this.imgList.splice(index, 1);
},
bytesToSize(bytes){
if (bytes === 0) return '0 B';
let k = 1000, // or 1024
sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
i = Math.floor(Math.log(bytes) / Math.log(k));
return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
},
dragenter(el){
el.stopPropagation();
el.preventDefault();
},
dragover(el){
el.stopPropagation();
el.preventDefault();
},
drop(el){
el.stopPropagation();
el.preventDefault();
this.fileList(el.dataTransfer.files);
}
}
})
</script> All resources on this site are contributed by netizens or reprinted by major download sites. Please check the integrity of the software yourself! All resources on this site are for learning reference only. Please do not use them for commercial purposes. Otherwise, you will be responsible for all consequences! If there is any infringement, please contact us to delete it. Contact information: admin@php.cn
Related Article
Image batch upload js plug-in imgFileupload.js
30 Nov 2019
This article introduces how to use imgFileupload.js, an image batch upload plug-in. I hope it will be helpful to students learning js. Select images in batches, limit image types through accept, and limit the size of a single file through FileSize.
VUE3 basic tutorial: Use Vue.js plug-in to encapsulate the image upload component
15 Jun 2023
VUE3 basic tutorial: Use the Vue.js plug-in to encapsulate the image upload component. Vue.js is a popular front-end framework that allows developers to create more efficient and flexible applications with less code. Especially after the release of Vue.js3, its optimization and improvements have made more developers tend to use it. This article will introduce how to use Vue.js3 to encapsulate an image upload component plug-in. Before starting, you need to make sure that Vue.js and VueCLI are installed. If not installed yet
16 May 2016
This article mainly introduces the useful method of uploading files using the jquery plug-in fineuploader.
Uploadify plug-in makes batch upload function with progress bar
26 Apr 2018
This time I will bring you the Uploadify plug-in’s batch upload function with a progress bar. What are the precautions for the Uploadify plug-in’s batch upload function with a progress bar? Here is a practical case, let’s take a look.
16 May 2016
When uploading, you can generate the code for scaling images within a fixed width and height range. Friends in need can refer to it.
H5 mobile phone image upload plug-in code
11 Jun 2018
This article mainly introduces the H5 image upload plug-in in detail. Based on zepto, it supports multi-file upload, progress and image preview. It has certain reference value. Interested friends can refer to it.
Implement image upload plug-in based on ThinkPHP5.0
04 May 2018
This article mainly introduces the implementation of image upload plug-in based on ThinkPHP5.0. It has certain reference value. Now I share it with you. Friends in need can refer to it.
29 Jul 2016
Upload images in batches: PHP's simple method to upload images in batches: This article describes an example of PHP's simple method to upload images in batches. Share it with everyone for your reference, as follows: <phpfunction upload_multi($path,$photo,$i){$uploaddir = './'.$path;//File storage directory if(!file_exists($uploaddir))/ /If the directory does not exist, create a new one $uploaddir=mkdir($uploaddir);$piece = explode
Introduction to the plug-in for image upload in ThinkPHP5.0
26 Sep 2017
The thinkphp5.0 image upload plug-in can preview cropped images and save original images. After cropping images, the directory of the original cropped images will be deleted to reduce space. Please refer to this article for the specific implementation code.
Hot Tools
jQuery+Html5 realizes beautiful confession animation code
jQuery+Html5 implements beautiful confession animation code, the animation effect is great, a must-have for programmers to confess!
Couple's romantic confession js special effects code
JS special effects code for couples' romantic confession. Such special effects can be used on wedding photography websites or placed on personal websites. It is also a good special effect. PHP Chinese website recommends downloading!
Simple js love confession artifact
Simple native js love confession artifact
Bunker's html5 particle animation expressive effects
Bunker's html5 particle animation expression special effects code, the animated special effects text can be changed in the code, you can make a page where you can customize text input, it should be very popular, this HTML5 special effect is very beautiful.
jQuery responsive background login interface template
jQuery responsive backend login interface template html source code. The login page uses jquery to verify the form and determine whether the username and password meet the requirements. Usually the login page is a page that must be used on corporate websites or mall websites. Responsive backend pages, When the browser zooms in or out, the background will resize the image according to the browser! PHP Chinese website recommends downloading!