基于zepto.js简单实现上传图片

在本文中，我们将深入探讨如何使用Zepto.js这个轻量级的JavaScript库来实现一个简单的图片上传功能。Zepto.js是专门为移动设备设计的一个类似jQuery的库，它提供了丰富的DOM操作和事件处理功能，适用于移动端的Web应用。 我们需要创建HTML结构。如给出的部分代码所示，我们有一个包含图片展示区域的`<div>`（`#showOtherImage`）以及一个文件输入元素（`<input type="file">`）。文件输入元素被一个带有图标和样式修饰的`<span>`包裹，以提供更好的用户体验。 ```html <div class="otherPic"> <div id="showOtherImage"></div> <span class="pull-left position_relative" id="openIdCardImg"> <span class="icon color-blue addPic">添加图片</span> <input type="file" class="yy_inputFile" id="other_inputFile" name="reasonImg" /> </span> </div> ``` 接下来，我们需要编写JavaScript代码来处理图片上传。这里，我们使用了`$(page).on('change', '#other_inputFile', function() {})`监听文件输入元素的`change`事件，当用户选择图片后触发。在这个事件处理函数中，我们调用了一个名为`resizeImage`的方法来对图片进行处理，以适应预览和可能的尺寸限制。 ```js var img_arr = new Array(); // 存储图片base64数据 $(page).on('change', '#other_inputFile', function () { $(this).resizeImage({ that: this, cutWid: '', // 图片裁剪宽度 quality: 0.6, // 图片压缩质量 limitWid: 710, // 图片最大宽度 success: function (data) { var len = $('#showOtherImage').find('img').size(); img_arr[len] = data.base64; var img = '<div class="position_relative display-inlineBlock" style="float:left;">' + '<img src="' + img_arr[len] + '">' + '<span class="icon deletedImages" sid="' + len + '" id="other_img_' + len + '">删除</span>' + '</div>'; $('#showOtherImage').append(img); if (img_arr.length == 9) { $('#openIdCardImg').hide(); // 当达到图片数量上限时隐藏添加按钮 return false; } } }); this.value = ''; // 清空文件输入框 }); ``` `resizeImage`方法用于图片的压缩和尺寸调整。由于这部分代码未提供，我们假设它使用canvas进行图片处理，并返回一个包含base64编码的图片数据对象。成功处理后，将图片添加到预览区，并将其base64数据存储在`img_arr`数组中。同时，如果图片数量达到9张（即预设的最大数量），则隐藏添加图片的按钮。 此外，我们还需要处理图片的删除操作。通过监听`.deletedImages`类的点击事件，我们可以删除对应的图片并更新`img_arr`数组： ```js // 删除相关图片 $(page).on('click', '.deletedImages', function () { var sid = $(this).attr('sid'); img_arr.splice(sid, 1); $(this).parent().remove(); $('#showOtherImage').html(''); // 清空预览区 for (var i = 0; i < img_arr.length; i++) { var img = '<div class="position_relative display-inlineBlock" style="float:left;">' + '<img src="' + img_arr[i] + '">' + '</div>'; $('#showOtherImage').append(img); } }); ``` 总结来说，这个基于Zepto.js的图片上传功能包括以下关键点： 1. 使用`<input type="file">`元素让用户选择图片。 2. 监听文件输入元素的`change`事件，处理图片数据（如压缩、尺寸调整）。 3. 将处理后的图片数据以base64格式存储，并在页面上预览。 4. 添加图片数量限制，超过限制时隐藏添加按钮。 5. 实现图片删除功能，更新预览区和图片数组。 这个实现虽然简单，但足以满足基本的图片上传需求。在实际项目中，你可能需要根据具体需求进行扩展，比如增加错误处理、进度显示、文件类型检查等。同时，考虑到兼容性和性能优化，你可能需要使用更专业的图片处理库，如`FileReader API`、`Image对象`或第三方库如`FileSaver.js`等。