2 gylovecy GYLOVECY 于 2016.01.15 11:39 提问

怎样用easyUI实现照片上传和预览

图片说明

就像实现这种格式和功能的easyUI 代码 求大神指教

4个回答

91program
91program   Ds   Rxr 2016.01.15 11:49
weixin_42409375
weixin_42409375 请问上传视频怎么做呢?
大约一个月之前 回复
91program
91program   Ds   Rxr 2016.01.15 11:50
CSDNXIAOD
CSDNXIAOD   2016.01.15 13:33

js实现图片上传预览
----------------------biu~biu~biu~~~在下问答机器人小D,这是我依靠自己的聪明才智给出的答案,如果不正确,你来咬我啊!

GYLOVECY
GYLOVECY   2016.01.15 17:05

多谢各位朋友帮助 现在问题已经解决 贴出自己的代码
/**

  • 上传应用图片 / var pathname = window.location.pathname; $("#addApp_iconblob").uploadify({ 'auto': false, 'swf': pathname+'resources/plugins/uploadify/uploadify.swf', 'uploader': 'upload/uploadFile;jsessionid='+_JSESSIONID, //后台处理程序的相对路径 'buttonText': '选择文件', 'fileTypeDesc':'不超过1M的图片 (.gif;*.jpg;*.png;*jpeg;)', 'fileSizeLimit': '1024KB', //允许上传的文件大小(kb) 此为1M 'fileTypeExts':'*.gif;*.jpg;*.png;*.jpeg', 'width':60,//浏览按钮的宽和高 'height':24, 'overrideEvents' : ['onDialogClose', 'onSelectError','onUploadSuccess'], 'onUploadError':function(file, errorCode, errorMsg, errorString){ $.messager.alert('消息',"图片" + file.name + " 上传失败!"); }, 'onUploadStart': function (file) {
    $("#addApp_iconblob").uploadify("settings", "formData", { 'appid': $('#addApp_id').val() }); //在onUploadStart事件中,也就是上传之前,把参数写好传递到后台。
    }, 'onUploadComplete': function(file, data, response) {//当单个文件上传完成后触发 setTimeout("addApp_cancelOK()","1000"); }, 'onSelect' : function(file) { $('#addApp_appicon').val(file.name); }, 'onUploadSuccess' : function(file, data, response) { $('#' + file.id).find('.data').html(' - 完成'); }, 'onDialogClose' : function(filesSelected, filesQueued, queueLength) { if (this.queueData.filesErrored > 0) { $.messager.alert('消息',"图片" + uploadErrorMsg + " 取消上传!"); } }, 'onSelectError' : function(file, errorCode, errorMsg) { var settings = this.settings; switch(errorCode) { case SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED: uploadErrorMsg = '\n文件数量超过上传限制 '; break; case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT: uploadErrorMsg = '\n文件 "' + file.name + '" 超过大小限制 (' + settings.fileSizeLimit + ')'; break; case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE: uploadErrorMsg = '\n文件 "' + file.name + '" 大小为0'; break; case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT: uploadErrorMsg = '\n文件 "' + file.name + '" 类型不接受 (' + settings.fileTypeDesc + ')'; break; } } }); $("#updateApp_iconblob").uploadify({ 'auto': false, 'swf': pathname+'resources/plugins/uploadify/uploadify.swf', 'uploader': 'upload/uploadFile;jsessionid='+_JSESSIONID, //后台处理程序的相对路径 'buttonText': '选择文件', 'fileTypeDesc':'不超过1M的图片 (*.gif;*.jpg;*.png;*.jpeg)', 'fileSizeLimit': '1024KB', //允许上传的文件大小(kb) 此为1M 'fileTypeExts':'*.gif;*.jpg;*.png;*.jpeg', 'width':60,//浏览按钮的宽和高 'height':24, 'overrideEvents' : ['onDialogClose', 'onSelectError','onUploadSuccess'], 'onUploadError':function(file, errorCode, errorMsg, errorString){ $.messager.alert('消息',"图片" + file.name + " 上传失败!"); }, 'onUploadComplete': function(file, data, response) {//当单个文件上传完成后触发 setTimeout("updateApp_cancelOK()","1000"); }, 'onUploadStart': function (file) {
    $("#updateApp_iconblob").uploadify("settings", "formData", { 'appid': $('#update_id').val() }); //在onUploadStart事件中,也就是上传之前,把参数写好传递到后台。
    }, 'onSelect' : function(file) { $('#updateApp_appicon').val(file.name); }, /* 'onUploadSuccess' : function(file, data, response) { $('#' + file.id).find('.data').html(' - 完成'); },*/ 'onDialogClose' : function(filesSelected, filesQueued, queueLength) { if (this.queueData.filesErrored > 0) { $.messager.alert('消息',"图片" + uploadErrorMsg + " 取消上传!"); } }, 'onSelectError' : function(file, errorCode, errorMsg) { var settings = this.settings; switch(errorCode) { case SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED: uploadErrorMsg = '\n文件数量超过上传限制 '; break; case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT: uploadErrorMsg = '\n文件 "' + file.name + '" 超过大小限制 (' + settings.fileSizeLimit + ')'; break; case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE: uploadErrorMsg = '\n文件 "' + file.name + '" 大小为0'; break; case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT: uploadErrorMsg = '\n文件 "' + file.name + '" 类型不接受 (' + settings.fileTypeDesc + ')'; break; } } });
wwrzyy
wwrzyy 纯手写么??????
大约一年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
html5+exif+canvas照片上传压缩旋转
实现手机端照片上传预览、压缩、旋转功能。 实现手机端照片上传预览、压缩、旋转功能。
easyui图片上传demo
JSP:        enctype="multipart/form-data">     <input name="file" data-options="onChange:function(){$('#IsCheck1').val(1)}" style="width: 150px;height:22px;" class="easyui-filebox" bu
Jquery 表单验证+本地图片上传-切割-预览
Jquery 表单验证+本地图片上传-切割-预览 完全项目 希望不要用于商业用途
easyui学习:datagrid显示图片并预览的实现方法
在easydatagrid列表里面显示图片,并实现点击预览功能,可以使用以下方法进行实现: 下面我以图片字段格式为:upload/file/aa.png,upload/file,bb.png来简单说明 这个是datagrid列表显示的那一行 商品图片 //显示图片的js函数    //图片添加路径       function imgFormatter(va
easyui文件框与html文件框实现本地图片预览
easyui文件框与html文件框实现本地图片预览
easyui js 上传图片加预览功能
选择图片: 预  览: //检查图片的格式是否正确,同时实现预览 function setImagePreview(obj, localImagId, imgObjPreview) { var array = new Array('gif', 'jpeg', 'png', 'jpg', 'bmp'); //可以上传的文
基于asp.net + easyui框架,js实现上传图片之前判断图片格式,同时实现预览,兼容各种浏览器+下载
最近在做图片上传的一个前台页面,上传图片功能虽然很简单,但是需要我们学习的地方很多。在上传图片之前验证图片的格式,并同时实现预览。这篇博客我们就用一段简单的js代码来实现验证图片格式,并同时预览的功能。 js代码 //检查图片的格式是否正确,同时实现预览 function se
在easyui的框架中,使用ajax实现批量上传图片到服务器
一、jsp页面:             id="addProductForm" action="${ctx}/product/add" method="post" enctype="multipart/form-data">........ 二、页面ajax提交请求:           var fd = new FormData(document.getElementById("add
web前端——实现上传图片预览功能
如图所示,上传图片是要有预览功能,本博讲述了这个预览功能的实现 HTML: 选择文件 CSS: .file { position: relative; display: inline-block; background: #D0EEFF; border: 1px solid #99D3F5; border-radius: 4px; pad
JS+html5实现图片上传预览
HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型。FileReader的使用方式非常简单,可以按照如下步骤创建FileReader对象并调用其方法: 1.检测浏览器对FileReader的支持 [javascript] view plaincopy 1.if(window.FileRead